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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 6 3 - 多点Loading特效【终极版】 - 3.0
返回列表 发新帖
查看: 2659|回复: 11

[庖丁解牛] 0 0 6 3 - 多点Loading特效【终极版】 - 3.0

[复制链接]
不二如是
发表于 2017-3-4 15:21:50 | 显示全部楼层 |阅读模式
购买主题 已有 10 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

shishunfu
发表于 2017-5-12 15:24:51 | 显示全部楼层
交作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>圆阵</title>

  7.         <style type="text/css">
  8.                 body{
  9.                         background-color: #AFE;
  10.                         margin: 260px;
  11.                 }
  12.                 .load{
  13.                         font-size: 33px;
  14.                         width: 1em;
  15.                         height: 1em;
  16.                         border-radius: 50%;

  18.                         animation: load-effect .9s infinite linear;
  19.                 }

  21.                 @keyframes load-effect {
  22.                         0%,
  23.                         100% {
  24.                                 box-shadow: 0 -3em 0 .2em  #FFF, 2em -2em 0 0 #FFF, 3em 0 0 -.5em #FFF, 2em 2em 0 -.5em #FFF, 0 3em 0 -.5em #000, -2em 2em 0 -.5em #000, -3em 0 0 -.5em #000, -2em -2em 0 0 #000;
  25.                         }
  26.                         12.5% {
  27.                                 box-shadow: 0 -3em 0 0 #FCC, 2em -2em 0 .2em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
  28.                         }
  29.                         25% {
  30.                                 box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 0 #FFB7DD, 3em 0 0 .2em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
  31.                         }
  32.                         37.5% {
  33.                                 box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 .2em #F4A, 0 3em 0 0 #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
  34.                         }
  35.                         50% {
  36.                                 box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 .2em #F08, -2em 2em 0 0 #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
  37.                         }
  38.                         62.5% {
  39.                                 box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 0 #F08, -2em 2em 0 .2em #C10066, -3em 0 0 0 #A20055, -2em -2em 0 -.5em #8C0044;
  40.                         }
  41.                         75% {
  42.                                 box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 0 #C10066, -3em 0 0 .2em #A20055, -2em -2em 0 0 #8C0044;
  43.                         }
  44.                         87.5% {
  45.                                 box-shadow: 0 -3em 0 0 #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 0 #C10066, -3em 0 0 0 #A20055, -2em -2em 0 .2em #8C0044;
  46.                         }
  47.                 }
  48.         </style>
  49. </head>
  50. <body>
  51.         <div class="load"></div>
  52. </body>
  53. </html>
复制代码
0050圆阵.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-12 21:44

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 2 反对 1

使用道具 举报

aswyamato1989
发表于 2017-8-6 08:38:38 | 显示全部楼层
交作业！
063.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-2-8 11:06

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-6 08:40:18 | 显示全部楼层
交作业时，手抖，给点错了，结果给2楼点了一个反对，我确实是手抖点错了，没有恶意。如果能够撤销，请指点如何撤销。真的非常抱歉。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

林子军
发表于 2018-2-8 10:53:52 | 显示全部楼层
顶
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

601900987
发表于 2018-7-18 22:49:48 | 显示全部楼层
本帖最后由 601900987 于 2018-7-18 22:51 编辑

@keyframes load-effect {
                        0%,                              这里的逗号难以理解啊， 为什么0%没有设置
                        100% {
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-7 21:42:32 | 显示全部楼层
本帖最后由 你在意在便在 于 2019-11-7 22:27 编辑

坚持！~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>圆阵</title>
  6. <style type="text/css">
  7. body{
  8.         background: #000;
  9.         margin: 200px;
  10. }
  11. .load{
  12.         font-size: 33px;
  13.         width: 1em;
  14.         height: 1em;
  15.         border-radius: 50%;
  16.         /* background: red; */
  17.         text-indent: -8888em;
  18.         animation: flash .9s infinite linear;
  19. }
  20. @keyframes flash{
  21.         0% ,
  22.         100% {
  23.                 box-shadow:
  24.                                 0em -3em 0  .2em rgba(231,76,60,1),
  25.                                 2em -2em 0   0em rgba(230,126,34,1),
  26.                                 3em  0em 0 -.5em rgba(254,202,87,1),
  27.                                 2em  2em 0 -.5em rgba(76,209,55,1),
  28.                                 0em  3em 0 -.5em rgba(0,168,255,1),
  29.                                -2em  2em 0 -.5em rgba(140,122,230,1),
  30.                                -3em  0em 0 -.5em rgba(255,159,243,1),
  31.                                -2em -2em 0   0em rgba(72,84,96,1)
  32.         }
  33.         12.5% {
  34.                 box-shadow:
  35.                                 0em -3em 0   0em rgba(231,76,60,1),
  36.                                 2em -2em 0  .2em rgba(230,126,34,1),
  37.                                 3em 0em  0   0em rgba(254,202,87,1),
  38.                                 2em  2em 0 -.5em rgba(76,209,55,1),
  39.                                 0em  3em 0 -.5em rgba(0,168,255,1),
  40.                                -2em  2em 0 -.5em rgba(140,122,230,1),
  41.                                -3em  0em 0 -.5em rgba(255,159,243,1),
  42.                                -2em -2em 0 -.5em rgba(72,84,96,1)
  43.         }
  44.         25% {
  45.                 box-shadow:
  46.                                 0em -3em 0 -.5em rgba(231,76,60,1),
  47.                                 2em -2em 0   0em rgba(230,126,34,1),
  48.                                 3em  0em 0  .2em rgba(254,202,87,1),
  49.                                 2em  2em 0   0em rgba(76,209,55,1),
  50.                                 0em  3em 0 -.5em rgba(0,168,255,1),
  51.                                -2em  2em 0 -.5em rgba(140,122,230,1),
  52.                                -3em  0em 0 -.5em rgba(255,159,243,1),
  53.                                -2em -2em 0 -.5em rgba(72,84,96,1)
  54.         }
  55.         37.5% {
  56.                 box-shadow:
  57.                                 0em -3em 0 -.5em rgba(231,76,60,1),
  58.                                 2em -2em 0 -.5em rgba(230,126,34,1),
  59.                                 3em 0em 0    0em rgba(254,202,87,1),
  60.                                 2em  2em 0  .2em rgba(76,209,55,1),
  61.                                 0em  3em 0   0em rgba(0,168,255,1),
  62.                                -2em  2em 0 -.5em rgba(140,122,230,1),
  63.                                -3em  0em 0 -.5em rgba(255,159,243,1),
  64.                                -2em -2em 0 -.5em rgba(72,84,96,1)
  65.         }
  66.         50% {
  67.                 box-shadow:
  68.                                 0em -3em 0 -.5em rgba(231,76,60,1),
  69.                                 2em -2em 0 -.5em rgba(230,126,34,1),
  70.                                 3em 0em 0  -.5em rgba(254,202,87,1),
  71.                                 2em  2em 0   0em rgba(76,209,55,1),
  72.                                 0em  3em 0  .2em rgba(0,168,255,1),
  73.                                -2em  2em 0   0em rgba(140,122,230,1),
  74.                                -3em  0em 0 -.5em rgba(255,159,243,1),
  75.                                -2em -2em 0 -.5em rgba(72,84,96,1)
  76.         }
  77.         62.5% {
  78.                 box-shadow:
  79.                                 0em -3em 0 -.5em rgba(231,76,60,1),
  80.                                 2em -2em 0 -.5em rgba(230,126,34,1),
  81.                                 3em 0em 0  -.5em rgba(254,202,87,1),
  82.                                 2em  2em 0 -.5em rgba(76,209,55,1),
  83.                                 0em  3em 0   0em rgba(0,168,255,1),
  84.                                -2em  2em 0  .2em rgba(140,122,230,1),
  85.                                -3em  0em 0   0em rgba(255,159,243,1),
  86.                                -2em -2em 0 -.5em rgba(72,84,96,1)
  87.         }
  88.         75% {
  89.                 box-shadow:
  90.                                 0em -3em 0 -.5em rgba(231,76,60,1),
  91.                                 2em -2em 0 -.5em rgba(230,126,34,1),
  92.                                 3em 0em 0  -.5em rgba(254,202,87,1),
  93.                                 2em  2em 0 -.5em rgba(76,209,55,1),
  94.                                 0em  3em 0 -.5em rgba(0,168,255,1),
  95.                                -2em  2em 0   0em rgba(140,122,230,1),
  96.                                -3em  0em 0  .2em rgba(255,159,243,1),
  97.                                -2em -2em 0   0em rgba(72,84,96,1)
  98.         }
  99.         87.5% {
  100.                 box-shadow:
  101.                                 0em -3em 0   0em rgba(231,76,60,1),
  102.                                 2em -2em 0 -.5em rgba(230,126,34,1),
  103.                                 3em 0em 0  -.5em rgba(254,202,87,1),
  104.                                 2em  2em 0 -.5em rgba(76,209,55,1),
  105.                                 0em  3em 0 -.5em rgba(0,168,255,1),
  106.                                -2em  2em 0 -.5em rgba(140,122,230,1),
  107.                                -3em  0em 0   0em rgba(255,159,243,1),
  108.                                -2em -2em 0  .2em rgba(72,84,96,1)
  109.         }
  110. }
  111. </style>
  112. </head>
  113. <body>
  114.     <div class="load">鱼C工作室</div>
  115. </body>
  116. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-19 11:46:29 | 显示全部楼层

花.png
坐标
花.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-19 17:59:49 | 显示全部楼层
601900987 发表于 2018-7-18 22:49
@keyframes load-effect {
                        0%,                              这里的逗号难以理 ...

设置了，0和100一样，所以用：0%，100%{}这样子一起设置了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-19 18:03:06 | 显示全部楼层
601900987 发表于 2018-7-18 22:49
@keyframes load-effect {
                        0%,                              这里的逗号难以理 ...

加一句，这是并集选择器，
，
是将这两的共同属性一起设置了，就不用在写一个0%或者100%语句了，简化了代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-18 11:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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