经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
纯CSS3实现div按照顺序出入效果_css3_CSS
来源:jb51  时间:2021/7/19 9:05:18  对本文有异议

本文主要介绍了纯CSS3实现div按照顺序出入效果,具有一定的参考价值,感兴趣的可以了解一下

效果:

源代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. div{
  8. margin-top: 10px;
  9. height: 50px;
  10. background-color: #FF0000;
  11. opacity: 0.6;
  12. }
  13. .a{
  14. animation: aa 2s linear 100ms infinite;
  15. }
  16. .b{
  17. animation: bb 2s linear infinite
  18. }
  19. .c{
  20. animation: cc 2s linear infinite
  21. }
  22. .d{
  23. animation:dd 2s linear infinite
  24. }
  25. @keyframes aa{
  26. 0%{width: 0;}
  27. 25%{width:200px;}
  28. 50%{width:200px;}
  29. 75%{width:200px;}
  30. 100%{width:200px;}
  31. }
  32. @keyframes bb{
  33. 0%{width: 0;}
  34. 25%{width:0px;}
  35. 50%{width:200px;}
  36. 75%{width:200px;}
  37. 100%{width:200px;}
  38. }
  39. @keyframes cc{
  40. 0%{width: 0;}
  41. 25%{width:0px;}
  42. 50%{width:0px;}
  43. 75%{width:200px;}
  44. 100%{width:200px;}
  45. }
  46. @keyframes dd{
  47. 0%{width: 0;}
  48. 25%{width:0px;}
  49. 50%{width:0px;}
  50. 75%{width:0px;}
  51. 100%{width:200px;}
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="a">
  57. </div>
  58. <div class="b">
  59. </div>
  60. <div class="c">
  61. </div>
  62. <div class="d">
  63. </div>
  64. </body>
  65. </html>

到此这篇关于纯CSS3实现div按照顺序出入效果的文章就介绍到这了,更多相关CSS3 div按照顺序出入效果内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号