tnblog
首页
视频
资源
登录

css实现动画效果案列:冒泡案列

7310人阅读 2019/6/6 19:30 总访问:123114 评论:0 收藏:0 手机
分类: 初吻给了奶嘴

css实现动画效果案列:冒泡案列


效果图:


代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. body,html {
  8. width100%;
  9. height100px;
  10. background-color#9b59b6;
  11. margin0;
  12. padding0;
  13. }
  14. .bubbels {
  15. position: absolute;
  16. width100%;
  17. height100%;
  18. z-index0;
  19. overflow: hidden;
  20. top0;
  21. left0;
  22. }
  23. .bubble {
  24. position: absolute;
  25. bottom0;
  26. width40px;
  27. height40px;
  28. background#f1f1f1;
  29. border-radius50%;
  30. opacity0.1;
  31. animation:  flying 10s infinite ease-in;
  32. }
  33. .bubble:nth-child(1){
  34. width40px;
  35. height40px;
  36. left0%;
  37. animation-direction8s;
  38. }
  39. .bubble:nth-child(2){
  40. width20px;
  41. height20px;
  42. left20%;
  43. animation-direction10s;
  44. animation-delay2s;
  45. }
  46. .bubble:nth-child(3){
  47. width50px;
  48. height50px;
  49. left35%;
  50. animation-direction10s;
  51. animation-delay2s;
  52. }
  53. .bubble:nth-child(4){
  54. width80px;
  55. height80px;
  56. left50%;
  57. animation-direction7s;
  58. animation-delay0s;
  59. }
  60. .bubble:nth-child(5){
  61. width80px;
  62. height80px;
  63. left15%;
  64. animation-direction7s;
  65. animation-delay0s;
  66. }.bubble:nth-child(6){
  67. width60px;
  68. height60px;
  69. left35%;
  70. animation-direction6s;
  71. animation-delay2s;
  72. }.bubble:nth-child(7){
  73. width60px;
  74. height60px;
  75. left70%;
  76. animation-direction6s;
  77. animation-delay3s;
  78. }
  79. .bubble:nth-child(8){
  80. width5px;
  81. height5px;
  82. left25%;
  83. animation-direction4s;
  84. animation-delay0.25;
  85. }
  86. .bubble:nth-child(9){
  87. width70px;
  88. height70px;
  89. left80%;
  90. /*动画效果和持续的时间*/
  91. animation-direction12s;
  92. animation-delay4s;
  93. }
  94. .bubble:nth-child(10){
  95. width12px;
  96. height12px;
  97. left2%;
  98. animation-direction4s;
  99. animation-delay1s;
  100. }
  101. @keyframes flying{
  102. 0%{
  103. bottom: -100px;
  104. transformtranslateX(0);
  105. }
  106. 50%{
  107. transformtranslateX(100px);
  108. }
  109. 100%{
  110. bottom1000px;
  111. transformtranslateX(-200px);
  112. }
  113. }
  114. </style>
  115. </head>
  116. <body>
  117. <div class="bubbels">
  118. <div class="bubble"></div>
  119. <div class="bubble"></div>
  120. <div class="bubble"></div>
  121. <div class="bubble"></div>
  122. <div class="bubble"></div>
  123. <div class="bubble"></div>
  124. <div class="bubble"></div>
  125. <div class="bubble"></div>
  126. <div class="bubble"></div>
  127. <div class="bubble"></div>
  128. </div>
  129. </body>
  130. </html>


评价
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
排名
2
文章
657
粉丝
44
评论
93
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术