CSS3 手机邮件发送动画

Email Send Animation Source: https://medium.com/@_jshmllr/design-in-sketch-then-animate-in-keynote-c7f40e59f8f8

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2144
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400);
body {
    font-family: 'Raleway', sans-serif;
    background: #009688;
    min-width: 515px;
}
.phone {
    width: 500px;
    height: 700px;
    background: url(http://imgh.us/iphone.svg) no-repeat center;
    background-size: contain;
    margin: auto;
}
.screen {
    background: #47a9f3;
    height: 505px;
    margin-left: 40%;
    width: 295px;
    overflow: hidden;
    margin-top: -600px;
    margin-left: auto;
    margin-right: auto;
}
.btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: url(http://imgh.us/mail_7.svg) no-repeat center, #fff;
    background-size: 50%;
    position: relative;
    top: 80%;
    left: 70%;
    transition: 1s;
}
.btn-ok {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: url(http://imgh.us/check52.svg) no-repeat center, #fff;
    background-size: 50%;
    position: relative;
    top: 80%;
    left: 70%;
    transition: 1s;
    fill: green;
}
.active {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #fff;
    background-size: 50%;
    position: relative;
    top: 25%;
    left: -38%;
    transition: 1s;
}
.container {
    padding-top: 10%;
    width: 300px;
    margin: auto;
}
.container input {
    width: 200px;
    margin: 10px 45px 40px 45px;
    border: none;
    border-bottom: 2px solid black;
    font-size: 1em;
}
#com {
    transition: 2s;
}
.large {
    height: 80px;
    transition: 2s;
    animation-timing-function: ease;
}
form {
    display: none;
}
#send {
    width: 70px;
    margin: -20px 115px;
    height: 70px;
    border-radius: 50%;
    background: url('http://imgh.us/paper20_1.svg') no-repeat center, #47a9f3;
    background-size: 60%;
    color: white;
    border-bottom: 5px solid #3c8ecd;
}
#send:active {
    border: none;
    height: 55px;
    padding-top: -5px;
}
a img {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
}
#original {
    position: fixed;
    top: 100px;
    text-decoration: none;
    color: white;
    whidth: 15%;
}
#original:hover {
    text-decoration: underline;
}

HTML

Email Send Animation Source: https://medium.com/@_jshmllr/design-in-sketch-then-animate-in-keynote-c7f40e59f8f8

编辑器支持Emmet

快捷键

Email Send Animation Source: https://medium.com/@_jshmllr/design-in-sketch-then-animate-in-keynote-c7f40e59f8f8

CSS3 发送留言的动效页面的UI模板

HTML5 CSS3带上传列表和进度动画的多文件上传控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：