1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. 	<style>
  7. 		html,body {
  8. 			margin: 0;
  9. 			padding: 0;
  10. 			width: 100%;
  11. 			height: 100%;
  12. 			font-size: 13.3333333vw;
  13. 			display: flex;
  14. 			align-items: center;
  15. 			justify-content: center;
  16. 		}
  17. 		.container {
  18. 			width: 2.3rem;
  19. 			height: .3rem;
  20. 			display: flex;
  21. 			justify-content: space-between;
  22. 		}
  23. 		.container span {
  24. 			width: .3rem;
  25. 			height: .3rem;
  26. 			--duration: 2s;
  27. 		}
  28. 		.girl {
  29. 			animation: slide var(--duration) ease-in-out infinite alternate;
  30. 		}
  31. 		@keyframes slide {
  32. 			from {
  33. 				transform: translateX(0);
  34. 				filter: brightness(1);
  35. 			}
  36. 			to {
  37. 				transform: translateX(2rem);
  38. 				filter: brightness(1.45);
  39. 			}
  40. 		}
  41. 		.boys {
  42. 			width: 1.8rem;
  43. 			display: flex;
  44. 			justify-content: space-between;
  45. 		}
  46. 		.boys span {
  47. 			animation: var(--duration) ease-in-out infinite alternate;
  48. 		}
  49. 		.boys span:nth-child(1) {
  50. 			animation-name: jump-off-1;
  51. 		}
  52. 		.boys span:nth-child(2) {
  53. 			animation-name: jump-off-2;
  54. 		}
  55. 		.boys span:nth-child(3) {
  56. 			animation-name: jump-off-3;
  57. 		}
  58. 		.boys span:nth-child(4) {
  59. 			animation-name: jump-off-4;
  60. 		}
  61. 		@keyframes jump-off-1 {
  62. 			0%, 15% {
  63. 				transform: rotate(0deg);
  64. 			}
  65. 			35%, 100% {
  66. 				transform-origin: -0.1rem center;
  67. 				transform: rotate(-180deg);
  68. 			}
  69. 		}
  70. 		@keyframes jump-off-2 {
  71. 			0%, 35% {
  72. 				transform: rotate(0deg);
  73. 			}
  74. 			50%, 100% {
  75. 				transform-origin: -.1rem center;
  76. 				transform: rotate(-180deg);
  77. 			}
  78. 		}
  79. 		@keyframes jump-off-3 {
  80. 			0%, 50% {
  81. 				transform: rotate(0deg);
  82. 			}
  83. 			65%, 100% {
  84. 				transform-origin: -0.1rem center;
  85. 				transform: rotate(-180deg);
  86. 			}
  87. 		}
  88. 		@keyframes jump-off-4 {
  89. 			0%, 65% {
  90. 				transform: rotate(0deg);
  91. 			}
  92. 			85%, 100% {
  93. 				transform-origin: -0.1rem center;
  94. 				transform: rotate(-180deg);
  95. 			}
  96. 		}
  97. 		.container span::before {
  98. 			content: '';
  99. 			position: absolute;
  100. 			width: inherit;
  101. 			height: inherit;
  102. 			border-radius: 15%;
  103. 			box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.3);
  104. 		}
  105. 		.girl::before {
  106. 			background-color: hotpink;
  107. 		}
  108. 		.boys span::before {
  109. 			background-color: dodgerblue;
  110. 			animation: var(--duration) ease-in-out infinite alternate;
  111. 		}
  112. 		.boys span:nth-child(1)::before {
  113. 			filter: brightness(1);
  114. 			animation-name: jump-down-1;
  115. 		}
  116. 		.boys span:nth-child(2)::before {
  117. 			filter: brightness(1.15);
  118. 			animation-name: jump-down-2;
  119. 		}
  120. 		.boys span:nth-child(3)::before {
  121. 			filter: brightness(1.3);
  122. 			animation-name: jump-down-3;
  123. 		}
  124. 		.boys span:nth-child(4)::before {
  125. 			filter: brightness(1.45);
  126. 			animation-name: jump-down-4;
  127. 		}
  128. 		@keyframes jump-down-1 {
  129. 			5% {
  130. 				transform: scale(1, 1);
  131. 			}
  132. 			15% {
  133. 				transform-origin: center bottom;
  134. 				transform: scale(1.3, 0.7);
  135. 			}
  136. 			22.5%, 27.5% {
  137. 				transform-origin: center center;
  138. 				transform: scale(0.8, 1.4);
  139. 			}
  140. 			35% {
  141. 				transform-origin: center top;
  142. 				transform: scale(1.3, 0.7);
  143. 			}
  144. 			45%, 100% {
  145. 				transform: scale(1, 1);
  146. 			}
  147. 		}
  148. 		@keyframes jump-down-2 {
  149. 			25% {
  150. 				transform: scale(1, 1);
  151. 			}
  152. 			35% {
  153. 				transform-origin: center bottom;
  154. 				transform: scale(1.3, 0.7);
  155. 			}
  156. 			41.25%, 43.75% {
  157. 				transform-origin: center center;
  158. 				transform: scale(0.8, 1.4);
  159. 			}
  160. 			50% {
  161. 				transform-origin: center top;
  162. 				transform: scale(1.3, 0.7);
  163. 			}
  164. 			60%, 100% {
  165. 				transform: scale(1, 1);
  166. 			}
  167. 		}
  168. 		@keyframes jump-down-3 {
  169. 			40% {
  170. 				transform: scale(1, 1);
  171. 			}
  172. 			50% {
  173. 				transform-origin: center bottom;
  174. 				transform: scale(1.3, 0.7);
  175. 			}
  176. 			56.25%, 58.75% {
  177. 				transform-origin: center center;
  178. 				transform: scale(0.8, 1.4);
  179. 			}
  180. 			65% {
  181. 				transform-origin: center top;
  182. 				transform: scale(1.3, 0.7);
  183. 			}
  184. 			75%, 100% {
  185. 				transform: scale(1, 1);
  186. 			}
  187. 		}
  188. 		@keyframes jump-down-4 {
  189. 			55% {
  190. 				transform: scale(1, 1);
  191. 			}
  192. 			65% {
  193. 				transform-origin: center bottom;
  194. 				transform: scale(1.3, 0.7);
  195. 			}
  196. 			72.5%, 77.5% {
  197. 				transform-origin: center center;
  198. 				transform: scale(0.8, 1.4);
  199. 			}
  200. 			85% {
  201. 				transform-origin: center top;
  202. 				transform: scale(1.3, 0.7);
  203. 			}
  204. 			95%, 100% {
  205. 				transform: scale(1, 1);
  206. 			}
  207. 		}
  208. 	</style>
  209. </head>
  210. <body>
  211.  
  212. <div class="container">
  213. 	<span class="girl"></span>
  214. 	<div class="boys">
  215. 		<span></span>
  216. 		<span></span>
  217. 		<span></span>
  218. 		<span></span>
  219. 	</div>
  220. </div>
  221.  
  222. </body>
  223. </html>

　　

炫酷CSS3加载动画的更多相关文章

  1. 基于css3炫酷页面加载动画特效代码

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  2. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  3. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  4. CSS3加载动画

    图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图:   图2 代码: 使用1个名为'l ...

  5. javascript,css3加载动画

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  6. css3 加载动画效果

    Loading 动画效果一           HTML 代码: <div class="spinner"> <div class="rect1&quo ...

  7. css3 加载动画

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  8. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  9. 几行css3代码实现超炫加载动画

    之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览   源码下载 实现代码: 极简的html代码: <div> ...

随机推荐

  1. jQuery——复选框操作

    学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...

  2. mysql语句之DDL

    SQL分类: DDL(Data Definition Languages)语句:数据定义语言,这些语句定义了不同的数据段.数据库.表.列.索引等数据库对象的定义.常用的语句关键字主要包括create. ...

  3. 自己实现一个Redux

    Redux是一个可预测的状态容器,提供可预测的状态管理. 什么是状态?状态其实也就是数据,管理状态也就是对数据的管理.那么什么是可预测的状态管理呢?能够监听数据的变化,获取变化的来源,在发生变化时可以 ...

  4. 【vue】父子组件间通信----传函数

    (一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...

  5. [NOI2007]社交网络（最短路）

    [NOI2007]社交网络 Description 在社交网络(socialnetwork)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题. 在一个社交圈子里有n个人,人与人之 ...

  6. 洛谷 P2783 有机化学之神偶尔会做作弊(Tarjan,LCA)

    题目背景 LS中学化学竞赛组教练是一个酷爱炉石的人. 有一天他一边搓炉石一边监考,而你作为一个信息竞赛的大神也来凑热闹. 然而你的化竞基友却向你求助了. “第1354题怎么做”<--手语 他问道 ...

  7. Sass-@extend

    Sass 中的 @extend 是用来扩展选择器或占位符.比如: .error { border: 1px #f00; background-color: #fdd; } .error.intrusi ...

  8. JAVA四种引用方式

    JAVA四种引用方式: java.lang.ref: 强引用(直接变量赋值) 软引用(SoftReference): 只有在要发生OOM错误之前才会回收掉老的软引用对象,应用场景主要防止内存溢出.(缓 ...

  9. bzoj1430 小猴打架 prufer 序列

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1430 题解 prufer 序列模板题. 一个由 \(n\) 个点构成的有标号无根树的个数为 \ ...

  10. k8s+jenkins

    1 server 的port , targetport, nodeport的区别 targetport为容器的暴露端口,为最后端的端口 port可以理解为pod的端口,pod是容器的外层,该端口可以在 ...