其他代码

炫酷CSS3预加载动画特效

也想出现在这里?联系我们
创客主机

炫酷CSS3预加载动画特效-创客云
这是一款超酷 CSS3 loading 预加载动画特效。该 loading 特效共有 4 种不同的效果,分别通过不同的 CSS3 keyframes 帧动画来完成。

HTML 结构

4 种 loading 预加载动画的 HTML 结构分别如下:

  1. <!-- 效果一 -->
  2. <div class="spinner-box">
  3.   <div class="circle-border">
  4.     <div class="circle-core"></div>
  5.   </div>  
  6. </div>
  7.  
  8. <!-- 效果二 -->
  9. <div class="spinner-box">
  10.   <div class="configure-border-1">  
  11.     <div class="configure-core"></div>
  12.   </div>  
  13.   <div class="configure-border-2">
  14.     <div class="configure-core"></div>
  15.   </div> 
  16. </div>
  17.  
  18. <!-- 效果三 -->
  19. <div class="spinner-box">
  20.   <div class="pulse-container">  
  21.     <div class="pulse-bubble pulse-bubble-1"></div>
  22.     <div class="pulse-bubble pulse-bubble-2"></div>
  23.     <div class="pulse-bubble pulse-bubble-3"></div>
  24.   </div>
  25. </div>
  26.  
  27. <!-- 效果四 -->
  28. <div class="spinner-box">
  29.   <div class="solar-system">
  30.     <div class="earth-orbit orbit">
  31.       <div class="planet earth"></div>
  32.       <div class="venus-orbit orbit">
  33.         <div class="planet venus"></div>
  34.         <div class="mercury-orbit orbit">
  35.           <div class="planet mercury"></div>
  36.           <div class="sun"></div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   </div>
  41. </div>

CSS 样式

然后分别为它们添加下面的 CSS 样式。

  1. /* KEYFRAMES */
  2.  
  3. @keyframes spin {
  4.   from {
  5.     transform: rotate(0);
  6.   }
  7.   to{
  8.     transform: rotate(359deg);
  9.   }
  10. }
  11.  
  12. @keyframes configure-clockwise {
  13.   0% {
  14.     transform: rotate(0);
  15.   }
  16.   25% {
  17.     transform: rotate(90deg);
  18.   }
  19.   50% {
  20.     transform: rotate(180deg);
  21.   }
  22.   75% {
  23.     transform: rotate(270deg);
  24.   }
  25.   100% {
  26.     transform: rotate(359deg);
  27.   }
  28. }
  29.  
  30. @keyframes configure-xclockwise {
  31.   0% {
  32.     transform: rotate(45deg);
  33.   }
  34.   25% {
  35.     transform: rotate(-45deg);
  36.   }
  37.   50% {
  38.     transform: rotate(-135deg);
  39.   }
  40.   75% {
  41.     transform: rotate(-215deg);
  42.   }
  43.   100% {
  44.     transform: rotate(-305deg);
  45.   }
  46. }
  47.  
  48. @keyframes pulse {
  49.   from {
  50.     opacity: 1;
  51.     transform: scale(1);
  52.   }
  53.   to {
  54.     opacity: .25;
  55.     transform: scale(.75);
  56.   }
  57. }
  58.  
  59. /* GRID STYLING */
  60.  
  61. * {
  62.   box-sizing: border-box;
  63. }
  64.  
  65. body {
  66.   min-height: 100vh;
  67.   background-color: #37474f;
  68.   display: flex;
  69.   justify-content: space-between;
  70.   flex-wrap: wrap;
  71.   align-items: flex-start;
  72. }
  73.  
  74. .spinner-box {
  75.   width: 300px;
  76.   height: 300px;
  77.   display: flex;
  78.   justify-content: center;
  79.   align-items: center;
  80.   background-color: transparent;
  81. }
  82.  
  83. /* SPINNING CIRCLE */
  84.  
  85. .circle-border {
  86.   width: 150px;
  87.   height: 150px;
  88.   padding: 3px;
  89.   display: flex;
  90.   justify-content: center;
  91.   align-items: center;
  92.   border-radius: 50%;
  93.   background: rgb(63,249,220);
  94.   background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  95.   animation: spin .8s linear 0s infinite;
  96. }
  97.  
  98. .circle-core {
  99.   width: 100%;
  100.   height: 100%;
  101.   background-color: #37474f;
  102.   border-radius: 50%;
  103. }
  104.  
  105. /* X-ROTATING BOXES */
  106.  
  107. .configure-border-1 {
  108.   width: 115px;
  109.   height: 115px;
  110.   padding: 3px;
  111.   position: absolute;
  112.   display: flex;
  113.   justify-content: center;
  114.   align-items: center;
  115.   background: #ffab91;
  116.   animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
  117. }
  118.  
  119. .configure-border-2 {
  120.   width: 115px;
  121.   height: 115px;
  122.   padding: 3px;
  123.   left: -115px;
  124.   display: flex;
  125.   justify-content: center;
  126.   align-items: center;
  127.   background: rgb(63,249,220);
  128.   transform: rotate(45deg);
  129.   animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
  130. }
  131.  
  132. .configure-core {
  133.   width: 100%;
  134.   height: 100%;
  135.   background-color: #37474f;
  136. }
  137.  
  138. /* PULSE BUBBLES */
  139.  
  140. .pulse-container {
  141.   width: 120px;
  142.   display: flex;
  143.   justify-content: space-between;
  144.   align-items: center;
  145. }
  146.  
  147. .pulse-bubble {
  148.   width: 20px;
  149.   height: 20px;
  150.   border-radius: 50%;
  151.   background-color: #3ff9dc;
  152. }
  153.  
  154. .pulse-bubble-1 {
  155.     animation: pulse .4s ease 0s infinite alternate;
  156. }
  157. .pulse-bubble-2 {
  158.     animation: pulse .4s ease .2s infinite alternate;
  159. }
  160. .pulse-bubble-3 {
  161.     animation: pulse .4s ease .4s infinite alternate;
  162. }
  163.  
  164. /* SOLAR SYSTEM */
  165.  
  166. .solar-system {
  167.   width: 250px;
  168.   height: 250px;
  169.   display: flex;
  170.   justify-content: center;
  171.   align-items: center;
  172. }
  173.  
  174. .orbit {
  175.     position: relative;
  176.     display: flex;
  177.     justify-content: center;
  178.     align-items: center;
  179.     border: 1px solid #ffffffa5;
  180.     border-radius: 50%;
  181. }
  182.  
  183. .earth-orbit {
  184.     width: 165px;
  185.     height: 165px;
  186.   -webkit-animation: spin 12s linear 0s infinite;
  187. }
  188.  
  189. .venus-orbit {
  190.     width: 120px;
  191.     height: 120px;
  192.   -webkit-animation: spin 7.4s linear 0s infinite;
  193. }
  194.  
  195. .mercury-orbit {
  196.     width: 90px;
  197.     height: 90px;
  198.   -webkit-animation: spin 3s linear 0s infinite;
  199. }
  200.  
  201. .planet {
  202.     position: absolute;
  203.     top: -5px;
  204.   width: 10px;
  205.   height: 10px;
  206.     border-radius: 50%;
  207.   background-color: #3ff9dc;
  208. }
  209.  
  210. .sun {
  211.     width: 35px;
  212.     height: 35px;
  213.     border-radius: 50%;
  214.     background-color: #ffab91;
  215. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

关键词:

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!