直奔主题：
首先得将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 动画效果。
大家可以实现这个可爱的笑脸动画吗？试试吧！
最新文章
热门文章
猜你喜欢
