CSS3实现swap交换动画

ttx9n

这篇文章主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下

直奔主题：

首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸

XML/HTML Code复制内容到剪贴板

1. <div><span>☺</span></div>    

笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.

CSS Code复制内容到剪贴板

1. div{   
2. width: 200px;   
3. height: 200px;   
4. color: #fff;   
5. border: #eee 2px solid;   
6. }   
7. div > span{   
8. width: 100%;   
9. height: 100%;   
10. position: relative;   
11. background-color: #000;   
12. display: flex;   
13. justify-content: center;   
14. align-items: center;   
15. font-size: 80px;   
16. animation: anims 1s ease-in;   
17. }  

然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.

CSS Code复制内容到剪贴板

1. @keyframes anims {   
2.     0% {   
3.       rightright: 0px;   
4.       top: 0;   
5.       transform: scale(0);   
6.      opacity: 0.2;   
7.     }   
8.     50%{   
9.       top: 0;   
10.       rightright: -300px;   
11.       transform: scale(0.5);   
12.      opacity: 0.6;   
13.     }   
14.   
15.     90%{   
16.       top: 0;   
17.       rightright: -10px;   
18.       transform: scale(0.99);   
19.       opacity: 0.9;   
20.     }   
21.   
22.     100%{   
23.       top: 0;   
24.       rightright:0px;   
25.       transform: scale(1);   
26.       opacity: 1;   
27.     }   
28.   
29. }   

这样就实现了我们想要的效果,当然自己出现的动态效果,还可以自己来设定.

好了,这就是swap 动画效果。

大家可以实现这个可爱的笑脸动画吗？试试吧！

3t0ukmu

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

kestlhoxn

人都不在了啊 啊

u7yxn9

大家都不容易！

q42obh

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

z80vh

收下来看看怎么样

r8st9

下载来瞧瞧

pb_tjc

啦啦啦啦啦德玛西亚

4k0mp7m

谢谢下载来看看

i3x3r3

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦