CSS3实例: 实现 swap 动画_html/css_WEB-ITnose
首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸
代码名称
☺
笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.
代码名称
div{
width: 200px;
height: 200px;
color: #fff;
border: #eee 2px solid;
}
div > span{
width: 100%;
height: 100%;
position: relative;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
animation: anims 1s ease-in;
}
然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.
代码名称
@keyframes anims {
0% {
right: 0px;
top: 0;
transform: scale(0);
opacity: 0.2;
}
50%{
top: 0;
right: -300px;
transform: scale(0.5);
opacity: 0.6;
}
90%{
top: 0;
right: -10px;
transform: scale(0.99);
opacity: 0.9;
}
100%{
top: 0;
right:0px;
transform: scale(1);
opacity: 1;
}
}
这样就实现了我们想要的效果,当然自己出现的动态效果,还可以自己来设定.
好了,这就是swap 动画效果.
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=185 ,欢迎大家传播与分享.
上一篇: Java开发环境搭建
下一篇: 用node.js做简介的网站
推荐阅读
-
CSS3实例: 实现 swap 动画_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
Android 用Animation-list实现逐帧动画_html/css_WEB-ITnose
-
CSS3实现的div元素水平运动指定距离_html/css_WEB-ITnose
-
css3实现的圆角效果代码实例_html/css_WEB-ITnose
-
css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
-
CSS3实现苹果电脑的DOCK菜单栏_html/css_WEB-ITnose
-
CSS3鼠标悬停图片动画_html/css_WEB-ITnose
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose
-
让ICON生动起来 纯CSS实现带动画的天气图标_html/css_WEB-ITnose