search

博客列表 >纯CSS3实现div按照顺序出入效果

纯CSS3实现div按照顺序出入效果

**沐曦??
**沐曦??原创
2021年10月14日 14:44:35523浏览
  1. 代码：
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. 6
  9. 7
  10. 8
  11. 9
  12. 10
  13. 11
  14. 12
  15. 13
  16. 14
  17. 15
  18. 16
  19. 17
  20. 18
  21. 19
  22. 20
  23. 21
  24. 22
  25. 23
  26. 24
  27. 25
  28. 26
  29. 27
  30. 28
  31. 29
  32. 30
  33. 31
  34. 32
  35. 33
  36. 34
  37. 35
  38. 36
  39. 37
  40. 38
  41. 39
  42. 40
  43. 41
  44. 42
  45. 43
  46. 44
  47. 45
  48. 46
  49. 47
  50. 48
  51. 49
  52. 50
  53. 51
  54. 52
  55. 53
  56. 54
  57. 55
  58. 56
  59. 57
  60. 58
  61. 59
  62. 60
  63. 61
  64. 62
  65. 63
  66. 64
  67. 65
  68. 66
  69. 67
  70. 68
  71. 69
  72. 70
  73. 71
  74. 72
  75. <!DOCTYPE html>
  76. <html>
  77.     <head>
  78.         <meta charset="UTF-8">
  79.         <title></title>
  80.         <style type="text/css">
  81.             div{
  82.                 margin-top: 10px;
  83.                 height: 50px;
  84.                 background-color: #FF0000;
  85.                 opacity: 0.6;
  86.             }
  88.             .a{
  89.                 animation: aa 2s linear 100ms infinite;
  90.             }
  91.             .b{
  92.                 animation: bb 2s linear infinite
  93.             }
  94.             .c{
  95.                 animation: cc 2s linear infinite
  96.             }
  97.             .d{
  98.                 animation:dd 2s linear infinite
  99.             }
  101.             @keyframes aa{
  102.                 0%{width: 0;}
  103.                 25%{width:200px;}
  104.                 50%{width:200px;}
  105.                 75%{width:200px;}
  106.                 100%{width:200px;}
  107.             }
  108.             @keyframes bb{
  109.                 0%{width: 0;}
  110.                 25%{width:0px;}
  111.                 50%{width:200px;}
  112.                 75%{width:200px;}
  113.                 100%{width:200px;}
  114.             }
  115.             @keyframes cc{
  116.                 0%{width: 0;}
  117.                 25%{width:0px;}
  118.                 50%{width:0px;}
  119.                 75%{width:200px;}
  120.                 100%{width:200px;}
  121.             }
  122.             @keyframes dd{
  123.                 0%{width: 0;}
  124.                 25%{width:0px;}
  125.                 50%{width:0px;}
  126.                 75%{width:0px;}
  127.                 100%{width:200px;}
  128.             }
  130.         </style>
  131.     </head>
  132.     <body>
  133.         <div class="a">
  135.         </div>
  136.         <div class="b">
  138.         </div>
  139.         <div class="c">
  141.         </div>
  142.         <div class="d">
  144.         </div>
  145.     </body>
  146. </html>
上一条：分享一个顺丰同城配送的扩展包并在laravel中使用下一条：搭建Gogs服务，页面报错Failed to test ‘git‘ command: exec: “git“: executable file not found in $PATH
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议