CSS3中怎么实现swap交换动画

发布时间:2021-08-09 16:10:38 作者:Leah
来源:亿速云 阅读:168

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

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

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

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

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

CSS Code复制内容到剪贴板

  1. div{   

  2. width200px;   

  3. height200px;   

  4. color#fff;   

  5. border#eee 2px solid;   

  6. }   

  7. div > span{   

  8. width: 100%;   

  9. height: 100%;   

  10. positionrelative;   

  11. background-color#000;   

  12. display: flex;   

  13. justify-contentcenter;   

  14. align-items: center;   

  15. font-size80px;   

  16. animation: anims 1s ease-in;   

  17. }  

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

CSS Code复制内容到剪贴板

  1. @keyframes anims {   

  2.     0% {   

  3.       rightright0px;   

  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交换动画,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 如何设置Linux SWAP交换分区大小?
  2. Linux 硬盘挂载及设置交换分区swap

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 swap

上一篇:css3中怎么实现图片翻牌特效

下一篇:CSS中怎么实现文字环绕图片效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》