查看: 537|回复: 0

[HTML代码] 纯css写出爱心版加载效果,等待加载也是一种享受

发表于 2018-4-5 08:00:01

纯css写出爱心版加载效果,等待加载也是一种享受

现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?就从加载来说,很多加载效果都是同一种风格可能用户经常逛网站早已经习惯,要是你的加载时间比其他网站时间长,效果还是一样的,可能就会关掉你的网站去其他网站观看,但是如果你的加载效果别具一格,有特点,可能用户看你加载效果的时候你的网站就打开了,这样用户也就不会立刻关掉你的网站。

html代码

  1. <div class="flex-container">
  2. <div class="unit">
  3. <div class="heart">
  4. <div class="heart-piece-0"></div>
  5. <div class="heart-piece-1"></div>
  6. <div class="heart-piece-2"></div>
  7. <div class="heart-piece-3"></div>
  8. <div class="heart-piece-4"></div>
  9. <div class="heart-piece-5"></div>
  10. <div class="heart-piece-6"></div>
  11. <div class="heart-piece-7"></div>
  12. <div class="heart-piece-8"></div>
  13. </div>
  14. <p>equal love</p>
  15. </div>
  16. </div>
复制代码

css代码

  1. <style>
  2. @import url("https://fonts.googleapis.com/css");
  3. html,
  4. body {
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .flex-container {
  9. width: 100%;
  10. height: 100%;
  11. position: relative;
  12. display: -webkit-box;
  13. display: -ms-flexbox;
  14. display: flex;
  15. -ms-flex-wrap: wrap;
  16. flex-wrap: wrap;
  17. -webkit-box-pack: center;
  18. -ms-flex-pack: center;
  19. justify-content: center;
  20. -webkit-box-align: center;
  21. -ms-flex-align: center;
  22. align-items: center;
  23. }
  24. body {
  25. background-color: #262e6f;
  26. }
  27. .unit {
  28. text-align: center;
  29. }
  30. .unit p {
  31. margin-top: 100px;
  32. font-family: 'Lato', sans-serif;
  33. font-weight: 100;
  34. text-transform: uppercase;
  35. color: #fff;
  36. }
  37. .heart {
  38. position: relative;
  39. font-size: 0;
  40. width: 138px;
  41. }
  42. [class*="heart-piece-"] {
  43. position: absolute;
  44. top: -5px;
  45. width: 10px;
  46. height: 10px;
  47. border-radius: 5px;
  48. }
  49. .heart-piece-4 {
  50. -webkit-animation: piece-4 3.2s infinite;
  51. animation: piece-4 3.2s infinite;
  52. }
  53. .heart-piece-3,
  54. .heart-piece-5 {
  55. -webkit-animation: piece-3 3.2s infinite;
  56. animation: piece-3 3.2s infinite;
  57. }
  58. .heart-piece-2,
  59. .heart-piece-6 {
  60. -webkit-animation: piece-2 3.2s infinite;
  61. animation: piece-2 3.2s infinite;
  62. }
  63. .heart-piece-1,
  64. .heart-piece-7 {
  65. -webkit-animation: piece-1 3.2s infinite;
  66. animation: piece-1 3.2s infinite;
  67. }
  68. .heart-piece-0,
  69. .heart-piece-8 {
  70. -webkit-animation: piece-0 3.2s infinite;
  71. animation: piece-0 3.2s infinite;
  72. }
  73. .heart-piece-0 {
  74. left: 0px;
  75. -webkit-animation-delay: 0s;
  76. animation-delay: 0s;
  77. background-color: #ec2d73;
  78. }
  79. .heart-piece-1 {
  80. left: 16px;
  81. -webkit-animation-delay: 0.15s;
  82. animation-delay: 0.15s;
  83. background-color: #eb5324;
  84. }
  85. .heart-piece-2 {
  86. left: 32px;
  87. -webkit-animation-delay: 0.3s;
  88. animation-delay: 0.3s;
  89. background-color: #fdc800;
  90. }
  91. .heart-piece-3 {
  92. left: 48px;
  93. -webkit-animation-delay: 0.45s;
  94. animation-delay: 0.45s;
  95. background-color: #47b264;
  96. }
  97. .heart-piece-4 {
  98. left: 64px;
  99. -webkit-animation-delay: 0.6s;
  100. animation-delay: 0.6s;
  101. background-color: #1470bd;
  102. }
  103. .heart-piece-5 {
  104. left: 80px;
  105. -webkit-animation-delay: 0.75s;
  106. animation-delay: 0.75s;
  107. background-color: #76469a;
  108. }
  109. .heart-piece-6 {
  110. left: 96px;
  111. -webkit-animation-delay: 0.9s;
  112. animation-delay: 0.9s;
  113. background-color: #ec2d73;
  114. }
  115. .heart-piece-7 {
  116. left: 112px;
  117. -webkit-animation-delay: 1.05s;
  118. animation-delay: 1.05s;
  119. background-color: #eb5324;
  120. }
  121. .heart-piece-8 {
  122. left: 128px;
  123. -webkit-animation-delay: 1.2s;
  124. animation-delay: 1.2s;
  125. background-color: #fdc800;
  126. }
  127. @-webkit-keyframes piece-4 {
  128. 0%, 10%, 90%, 100% {
  129. height: 10px;
  130. top: -5px;
  131. }
  132. 45%, 55% {
  133. height: 94px;
  134. top: -23px;
  135. }
  136. }
  137. @keyframes piece-4 {
  138. 0%, 10%, 90%, 100% {
  139. height: 10px;
  140. top: -5px;
  141. }
  142. 45%, 55% {
  143. height: 94px;
  144. top: -23px;
  145. }
  146. }
  147. @-webkit-keyframes piece-3 {
  148. 0%, 10%, 90%, 100% {
  149. height: 10px;
  150. top: -5px;
  151. }
  152. 45%, 55% {
  153. height: 90px;
  154. top: -31px;
  155. }
  156. }
  157. @keyframes piece-3 {
  158. 0%, 10%, 90%, 100% {
  159. height: 10px;
  160. top: -5px;
  161. }
  162. 45%, 55% {
  163. height: 90px;
  164. top: -31px;
  165. }
  166. }
  167. @-webkit-keyframes piece-2 {
  168. 0%, 10%, 90%, 100% {
  169. height: 10px;
  170. top: -5px;
  171. }
  172. 45%, 55% {
  173. height: 80px;
  174. top: -37px;
  175. }
  176. }
  177. @keyframes piece-2 {
  178. 0%, 10%, 90%, 100% {
  179. height: 10px;
  180. top: -5px;
  181. }
  182. 45%, 55% {
  183. height: 80px;
  184. top: -37px;
  185. }
  186. }
  187. @-webkit-keyframes piece-1 {
  188. 0%, 10%, 90%, 100% {
  189. height: 10px;
  190. top: -5px;
  191. }
  192. 45%, 55% {
  193. height: 60px;
  194. top: -31px;
  195. }
  196. }
  197. @keyframes piece-1 {
  198. 0%, 10%, 90%, 100% {
  199. height: 10px;
  200. top: -5px;
  201. }
  202. 45%, 55% {
  203. height: 60px;
  204. top: -31px;
  205. }
  206. }
  207. @-webkit-keyframes piece-0 {
  208. 0%, 10%, 90%, 100% {
  209. height: 10px;
  210. top: -5px;
  211. }
  212. 45%, 55% {
  213. height: 30px;
  214. top: -15px;
  215. }
  216. }
  217. @keyframes piece-0 {
  218. 0%, 10%, 90%, 100% {
  219. height: 10px;
  220. top: -5px;
  221. }
  222. 45%, 55% {
  223. height: 30px;
  224. top: -15px;
  225. }
  226. }
  227. </style>
复制代码

如果有对前端感兴趣前端程序员,可以加入我们的web前端技术学习群哦1893,94454。会送前端的精品教程噢!



回复

使用道具 举报