CSS3中怎么实现swap交换动画

本篇文章为大家展示了CSS3中怎么实现swap交换动画，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联专注于灯塔企业网站建设,成都响应式网站建设公司,商城网站定制开发。灯塔网站建设公司,为灯塔等地区提供建站服务。全流程定制网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

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

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

1. ☺
       

笑脸居中我们用最新的布局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. }   

上述内容就是CSS3中怎么实现swap交换动画，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。