设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 纯css3制作loading花瓣加载动画效果
返回列表 发新帖
查看: 2108|回复: 5

[作品展示] 纯css3制作loading花瓣加载动画效果

[复制链接]
aoliann
发表于 2019-5-7 16:35:59 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
预览效果  

                               
登录/注册后可看大图

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>花瓣加载动画-jq22.com</title>
  6. <style>
  7. body {
  8.   background: #161B29;
  9.   margin: 0 auto;
  10.   height: 100%;
  11.   width: 100%;
  12.   overflow: hidden;
  13. }

  15. .container {
  16.   width: 40vw;
  17.   height: 40vw;
  18.   position: absolute;
  19.   left: 0;
  20.   right: 0;
  21.   top: 0;
  22.   bottom: 0;
  23.   margin: auto;
  24.   overflow: hidden;
  25. }

  27. .common {
  28.   height: 5vw;
  29.   max-height: 100%;
  30.   overflow: auto;
  31.   width: 2vw;
  32.   margin: auto;
  33.   max-width: 100%;
  34.   position: absolute;
  35.   background-color: ;
  36.   border-radius: 0vw 10vw 0vw 10vw;
  37.   box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
  38. }

  40. .one {
  41.   transform: rotate(45deg);
  42.   left: 0;
  43.   right: 0;
  44.   top: 0;
  45.   bottom: 7.5vw;
  46. }

  48. .two {
  49.   transform: rotate(90deg);
  50.   left: 5.5vw;
  51.   right: 0;
  52.   top: 0;
  53.   bottom: 5.5vw;
  54. }

  56. .three {
  57.   transform: rotate(135deg);
  58.   left: 7.5vw;
  59.   right: 0;
  60.   top: 0;
  61.   bottom: 0;
  62. }

  64. .four {
  65.   transform: rotate(180deg);
  66.   left: 5.5vw;
  67.   right: 0;
  68.   top: 5.5vw;
  69.   bottom: 0;
  70. }

  72. .five {
  73.   transform: rotate(225deg);
  74.   left: 0;
  75.   right: 0;
  76.   top: 7.5vw;
  77.   bottom: 0;
  78. }

  80. .six {
  81.   transform: rotate(270deg);
  82.   left: 0;
  83.   right: 5.5vw;
  84.   top: 5.5vw;
  85.   bottom: 0;
  86. }

  88. .seven {
  89.   transform: rotate(315deg);
  90.   left: 0;
  91.   right: 7.5vw;
  92.   top: 0;
  93.   bottom: 0;
  94. }

  96. .eight {
  97.   transform: rotate(360deg);
  98.   left: 0;
  99.   right: 5.5vw;
  100.   top: 0;
  101.   bottom: 5.5vw;
  102. }

  104. .bar {
  105.   width: 12vw;
  106.   height: .25vw;
  107.   position: absolute;
  108.   left: 0;
  109.   right: 0;
  110.   top: 16vw;
  111.   bottom: 0;
  112.   margin: auto;
  113.   overflow: hidden;
  114.   background: #E645D0;
  115. }

  117. .progress {
  118.   width: 12vw;
  119.   height: .5vw;
  120.   position: absolute;
  121.   left: 0;
  122.   right: 0;
  123.   top: 0;
  124.   bottom: 0;
  125.   margin: auto;
  126.   overflow: hidden;
  127.   background: #17E1E6;
  128. }

  130. .one {
  131.   animation: one 1s ease infinite;
  132.   -moz-animation: one 1s ease infinite;
  133.   /* Firefox */
  134.   -webkit-animation: one 1s ease infinite;
  135.   /* Safari and Chrome */
  136.   -o-animation: one 1s ease infinite;
  137.   /* Opera */
  138. }

  140. @keyframes one {
  141.   0%,
  142.   100% {}
  143.   50% {
  144.     background: ;
  145.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  146.   }
  147. }

  149. .two {
  150.   animation: two 1s .125s ease infinite;
  151.   -moz-animation: two 1s .125s ease infinite;
  152.   /* Firefox */
  153.   -webkit-animation: two 1s .125s ease infinite;
  154.   /* Safari and Chrome */
  155.   -o-animation: two 1s .125s ease infinite;
  156.   /* Opera */
  157. }

  159. @keyframes two {
  160.   0%,
  161.   100% {}
  162.   50% {
  163.     background: ;
  164.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  165.   }
  166. }

  168. .three {
  169.   animation: three 1s .25s ease infinite;
  170.   -moz-animation: three 1s .25s ease infinite;
  171.   /* Firefox */
  172.   -webkit-animation: three 1s .25s ease infinite;
  173.   /* Safari and Chrome */
  174.   -o-animation: three 1s .25s ease infinite;
  175.   /* Opera */
  176. }

  178. @keyframes three {
  179.   0%,
  180.   100% {}
  181.   50% {
  182.     background: ;
  183.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  184.   }
  185. }

  187. .four {
  188.   animation: four 1s .375s ease infinite;
  189.   -moz-animation: four 1s .375s ease infinite;
  190.   /* Firefox */
  191.   -webkit-animation: four 1s .375s ease infinite;
  192.   /* Safari and Chrome */
  193.   -o-animation: four 1s .375s ease infinite;
  194.   /* Opera */
  195. }

  197. @keyframes four {
  198.   0%,
  199.   100% {}
  200.   50% {
  201.     background: ;
  202.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  203.   }
  204. }

  206. .five {
  207.   animation: five 1s .5s ease infinite;
  208.   -moz-animation: five 1s .5s ease infinite;
  209.   /* Firefox */
  210.   -webkit-animation: five 1s .5s ease infinite;
  211.   /* Safari and Chrome */
  212.   -o-animation: five 1s .5s ease infinite;
  213.   /* Opera */
  214. }

  216. @keyframes five {
  217.   0%,
  218.   100% {}
  219.   50% {
  220.     background: ;
  221.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  222.   }
  223. }

  225. .six {
  226.   animation: six 1s .625s ease infinite;
  227.   -moz-animation: six 1s .625s ease infinite;
  228.   /* Firefox */
  229.   -webkit-animation: six 1s .625s ease infinite;
  230.   /* Safari and Chrome */
  231.   -o-animation: six 1s .625s ease infinite;
  232.   /* Opera */
  233. }

  235. @keyframes six {
  236.   0%,
  237.   100% {}
  238.   50% {
  239.     background: ;
  240.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  241.   }
  242. }

  244. .seven {
  245.   animation: seven 1s .750s ease infinite;
  246.   -moz-animation: seven 1s .750s ease infinite;
  247.   /* Firefox */
  248.   -webkit-animation: seven 1s .750s ease infinite;
  249.   /* Safari and Chrome */
  250.   -o-animation: seven 1s .750s ease infinite;
  251.   /* Opera */
  252. }

  254. @keyframes seven {
  255.   0%,
  256.   100% {}
  257.   50% {
  258.     background: ;
  259.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  260.   }
  261. }

  263. .eight {
  264.   animation: eight 1s .875s ease infinite;
  265.   -moz-animation: eight 1s .875s ease infinite;
  266.   /* Firefox */
  267.   -webkit-animation: eight 1s .875s ease infinite;
  268.   /* Safari and Chrome */
  269.   -o-animation: eight 1s .875s ease infinite;
  270.   /* Opera */
  271. }

  273. @keyframes eight {
  274.   0%,
  275.   100% {}
  276.   50% {
  277.     background: ;
  278.     box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  279.   }
  280. }

  282. .container {
  283.   animation: container 5s linear infinite;
  284.   -moz-animation: container 5s linear infinite;
  285.   /* Firefox */
  286.   -webkit-animation: container 5s linear infinite;
  287.   /* Safari and Chrome */
  288.   -o-animation: container 5s linear infinite;
  289.   /* Opera */
  290. }

  292. @keyframes container {
  293.   from {
  294.     transform: rotate(0deg);
  295.   }
  296.   to {
  297.     transform: rotate(-360deg);
  298.   }
  299. }

  301. .progress {
  302.   animation: progress 15s ease;
  303.   -moz-animation: progress 15s ease;
  304.   /* Firefox */
  305.   -webkit-animation: progress 15s ease;
  306.   /* Safari and Chrome */
  307.   -o-animation: progress 15s ease;
  308.   /* Opera */
  309. }

  311. @keyframes progress {
  312.   0% {
  313.     left: -24vw;
  314.   }
  315.   10% {
  316.     left: -20vw;
  317.   }
  318.   30% {
  319.     left: -16vw;
  320.   }
  321.   50% {
  322.     left: -12vw;
  323.   }
  324.   65% {
  325.     left: -10vw;
  326.   }
  327.   80% {
  328.     left: -4vw;
  329.   }
  330.   100% {
  331.     left: 0;
  332.   }
  333. }

  335. .fade-in {
  336.   animation: fade-in 2s ease;
  337.   -moz-animation: fade-in 2s ease;
  338.   /* Firefox */
  339.   -webkit-animation: fade-in 2s ease;
  340.   /* Safari and Chrome */
  341.   -o-animation: fade-in 2s ease;
  342.   /* Opera */
  343. }

  345. @keyframes fade-in {
  346.   from {
  347.     opacity: 0;
  348.   }
  349.   to {
  350.     opacity: 1;
  351.   }
  352. }

  354. .out {
  355.   animation: out 2s 15s ease;
  356.   -moz-animation: out 2s 15s ease;
  357.   /* Firefox */
  358.   -webkit-animation: out 2s 15s ease;
  359.   /* Safari and Chrome */
  360.   -o-animation: out 2s 15s ease;
  361.   /* Opera */
  362. }

  364. @keyframes out {
  365.   from {
  366.     opacity: 1;
  367.   }
  368.   to {
  369.     opacity: 0;
  370.   }
  371. }</style>
  372. </head>
  373. <body>
  374. <div class="out">
  375.   <div class="fade-in">
  376.     <div class="container">
  377.       <div class="one common"></div>
  378.       <div class="two common"></div>
  379.       <div class="three common"></div>
  380.       <div class="four common"></div>
  381.       <div class="five common"></div>
  382.       <div class="six common"></div>
  383.       <div class="seven common"></div>
  384.       <div class="eight common"></div>
  385.     </div>
  386.     <div class="bar">
  387.       <div class="progress"></div>
  388.     </div>
  389.   </div>

  391. <script>
  392. </script>

  394. </body>
  395. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

weiter
发表于 2019-12-7 19:50:54 | 显示全部楼层
谢谢大佬
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wuqramy
发表于 2020-4-4 23:40:07 | 显示全部楼层
免费的哦
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

buer233buer
发表于 2020-4-6 15:06:30 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

chenyiyun
发表于 2021-6-5 14:42:31 | 显示全部楼层
赛高！！！！！！！！！！！
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

独自探戈
发表于 2021-6-15 23:29:59 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-22 01:07

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表