tnblog
首页
视频
资源
登录
原

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

7306人阅读 2019/6/6 19:30 总访问：123033 评论：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. 				width: 100%;

  9. 				height: 100px;

  10. 				background-color: #9b59b6;

  11. 				margin: 0;

  12. 				padding: 0;

  13. 			}

  14. 			

  15. 			.bubbels {

  16. 				position: absolute;

  17. 				width: 100%;

  18. 				height: 100%;

  19. 				z-index: 0;

  20. 				overflow: hidden;

  21. 				top: 0;

  22. 				left: 0;

  23. 			}

  24. 			.bubble {

  25. 				position: absolute;

  26. 				bottom: 0;

  27. 				width: 40px;

  28. 				height: 40px;

  29. 				background: #f1f1f1;

  30. 				border-radius: 50%;

  31. 				opacity: 0.1;

  32. 				animation:  flying 10s infinite ease-in;

  33. 			}

  34. 			

  35. 			.bubble:nth-child(1){

  36. 				width: 40px;

  37. 				height: 40px;

  38. 				left: 0%;

  39. 				animation-direction: 8s;

  40. 			}

  41. 			.bubble:nth-child(2){

  42. 				width: 20px;

  43. 				height: 20px;

  44. 				left: 20%;

  45. 				animation-direction: 10s;

  46. 				animation-delay: 2s;

  47. 			}

  48. 			.bubble:nth-child(3){

  49. 				width: 50px;

  50. 				height: 50px;

  51. 				left: 35%;

  52. 				animation-direction: 10s;

  53. 				animation-delay: 2s;

  54. 			}

  55. 			

  56. 			.bubble:nth-child(4){

  57. 				width: 80px;

  58. 				height: 80px;

  59. 				left: 50%;

  60. 				animation-direction: 7s;

  61. 				animation-delay: 0s;

  62. 			}

  63. 			

  64. 			.bubble:nth-child(5){

  65. 				width: 80px;

  66. 				height: 80px;

  67. 				left: 15%;

  68. 				animation-direction: 7s;

  69. 				animation-delay: 0s;

  70. 			}.bubble:nth-child(6){

  71. 				width: 60px;

  72. 				height: 60px;

  73. 				left: 35%;

  74. 				animation-direction: 6s;

  75. 				animation-delay: 2s;

  76. 			}.bubble:nth-child(7){

  77. 				width: 60px;

  78. 				height: 60px;

  79. 				left: 70%;

  80. 				animation-direction: 6s;

  81. 				animation-delay: 3s;

  82. 			}

  83. 			.bubble:nth-child(8){

  84. 				width: 5px;

  85. 				height: 5px;

  86. 				left: 25%;

  87. 				animation-direction: 4s;

  88. 				animation-delay: 0.25;

  89. 			}

  90. 			.bubble:nth-child(9){

  91. 				width: 70px;

  92. 				height: 70px;

  93. 				left: 80%;

  94. 				/*动画效果和持续的时间*/

  95. 				animation-direction: 12s;

  96. 				animation-delay: 4s;

  97. 			}

  98. 			.bubble:nth-child(10){

  99. 				width: 12px;

  100. 				height: 12px;

  101. 				left: 2%;

  102. 				animation-direction: 4s;

  103. 				animation-delay: 1s;

  104. 			}

  105. 			@keyframes flying{

  106. 				0%{

  107. 					bottom: -100px;

  108. 					transform: translateX(0);

  109. 				}

  110. 				

  111. 				50%{

  112. 					transform: translateX(100px);

  113. 				}

  114. 				

  115. 				100%{

  116. 					bottom: 1000px;

  117. 					transform: translateX(-200px);

  118. 				}

  119. 			}

  120. 		</style>

  121. 	</head>

  122. 	<body>

  123. 		<div class="bubbels">

  124. 			<div class="bubble"></div>

  125. 			<div class="bubble"></div>

  126. 			<div class="bubble"></div>

  127. 			<div class="bubble"></div>

  128. 			<div class="bubble"></div>

  129. 			<div class="bubble"></div>

  130. 			<div class="bubble"></div>

  131. 			<div class="bubble"></div>

  132. 			<div class="bubble"></div>

  133. 			<div class="bubble"></div>

  134. 		</div>

  135. 	</body>

  136. </html>


评价
大概你身上总有我喜欢的味道，所以我一见你就开心的笑
博主信息
排名
30
文章
18
粉丝
6
评论
11
文章类别
最新文章
最新评价
vs code 插件安装推荐
修心 : 背景的妹子好评啊!
如何完全干净的卸载 vs code编辑器
剑轩 : vs code插件这么顽强的么
广告终结插件推荐
剑轩 : 我好像也是用的这个
windoes 强力下载工具Internet Download Manager
饰心 : 线程不要开多了 开多了要遭网站拉黑
推荐一款三无压缩软件：bandizip
瑾语 : 用过 感觉没rar好用
修改电脑的鼠标指针样式
剑轩 : 挺喜欢你这个个性签名的
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术