枫树林给大地铺上了红色的地毯，秋风一吹，枫叶发出哗啦啦的响声，好似在鼓掌欢庆这丰收的景象。看，那菊花，它们开得多么热烈！距么旺盛！黄的、红的、白的、紫的……一朵朵，一簇簇，迎着秋风，披着寒霜，争妍斗艳，喷芳吐香，开得到处都是，简直成了一个锦簇的世界。
直奔主题：
首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸
XML/HTML Code复制内容到剪贴板
- <div><span>☺</span></div>
笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关好代码教程,大家不懂的可以看看.
CSS Code复制内容到剪贴板
- div{
- width:200px;
- height:200px;
- color:#fff;
- border:#eee2pxsolid;
- }
- div>span{
- width:100%;
- height:100%;
- position:relative;
- background-color:#000;
- display:flex;
- justify-content:center;
- align-items:center;
- font-size:80px;
- animation:anims1sease-in;
- }
然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.
CSS Code复制内容到剪贴板
- @keyframesanims{
- 0%{
- rightright:0px;
- top:0;
- transform:scale(0);
- opacity:0.2;
- }
- 50%{
- top:0;
- rightright:-300px;
- transform:scale(0.5);
- opacity:0.6;
- }
- 90%{
- top:0;
- rightright:-10px;
- transform:scale(0.99);
- opacity:0.9;
- }
- 100%{
- top:0;
- rightright:0px;
- transform:scale(1);
- opacity:1;
- }
- }
这样就实现了我们想要的效果,当然自己出现的动态效果,还可以自己来设定.
好了,这就是swap 动画效果。
大家可以实现这个可爱的笑脸动画吗？试试吧！
本文CSS3如何实现swap交换动画到此结束。成熟的麦子低垂着头，那是在教我们谦逊;一群蚂蚁能抬走大骨头，那是在教我们团结;温柔的水滴穿岩石，那是在教我们坚韧;蜜蜂在花丛中忙碌，那是在教我们勤劳。小编再次感谢大家对我们的支持！
