CSS3中怎么實現(xiàn)swap交換動畫

本篇文章為大家展示了CSS3中怎么實現(xiàn)swap交換動畫，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

首先得將HTML結(jié)構(gòu)設(shè)計好,一個固定的窗口,然后一個帶有黑色背景的笑臉

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div><span>?</span></div>    

笑臉居中我們用最新的布局flex來實現(xiàn),這個也是很好用的屬性.之前文章中已經(jīng)有flex的相關(guān)教程,大家不懂的可以看看.

CSS Code復(fù)制內(nèi)容到剪貼板

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. }  

然后加入動畫,動畫是位置的變化,和元素縮放狀態(tài)的變化,再加入了透明度的變化.

CSS Code復(fù)制內(nèi)容到剪貼板

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. }   

上述內(nèi)容就是CSS3中怎么實現(xiàn)swap交換動畫，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。