搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3如何实现swap交换动画

发布时间：2023-05-23 15:25:59 来源：互联网
.
枫树林给大地铺上了红色的地毯，秋风一吹，枫叶发出哗啦啦的响声，好似在鼓掌欢庆这丰收的景象。看，那菊花，它们开得多么热烈！距么旺盛！黄的、红的、白的、紫的……一朵朵，一簇簇，迎着秋风，披着寒霜，争妍斗艳，喷芳吐香，开得到处都是，简直成了一个锦簇的世界。

直奔主题：

首先得将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:#eee2pxsolid;
  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:anims1sease-in;
  17. }

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

CSS Code复制内容到剪贴板
  1. @keyframesanims{
  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. }
  15. 90%{
  16. top:0;
  17. rightright:-10px;
  18. transform:scale(0.99);
  19. opacity:0.9;
  20. }
  22. 100%{
  23. top:0;
  24. rightright:0px;
  25. transform:scale(1);
  26. opacity:1;
  27. }
  29. }

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

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

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

本文CSS3如何实现swap交换动画到此结束。成熟的麦子低垂着头，那是在教我们谦逊;一群蚂蚁能抬走大骨头，那是在教我们团结;温柔的水滴穿岩石，那是在教我们坚韧;蜜蜂在花丛中忙碌，那是在教我们勤劳。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： swap
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图