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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 6 3 - 多点Loading特效【终极版】 - 3.0
返回列表 发新帖
查看: 2930|回复: 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 | 显示全部楼层
交作业
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>圆阵</title>

        <style type="text/css">
                body{
                        background-color: #AFE;
                        margin: 260px;
                }
                .load{
                        font-size: 33px;
                        width: 1em;
                        height: 1em;
                        border-radius: 50%;

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

                @keyframes load-effect {
                        0%,
                        100% {
                                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;
                        }
                        12.5% {
                                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;
                        }
                        25% {
                                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;
                        }
                        37.5% {
                                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;
                        }
                        50% {
                                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;
                        }
                        62.5% {
                                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;
                        }
                        75% {
                                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;
                        }
                        87.5% {
                                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;
                        }
                }
        </style>
</head>
<body>
        <div class="load"></div>
</body>
</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 编辑

坚持！~ 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆阵</title>
<style type="text/css">
body{
        background: #000;
        margin: 200px;
}
.load{
        font-size: 33px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        /* background: red; */
        text-indent: -8888em;
        animation: flash .9s infinite linear;
} 
@keyframes flash{
        0% ,
        100% {
                box-shadow: 
                                0em -3em 0  .2em rgba(231,76,60,1),
                                2em -2em 0   0em rgba(230,126,34,1),
                                3em  0em 0 -.5em rgba(254,202,87,1),
                                2em  2em 0 -.5em rgba(76,209,55,1),
                                0em  3em 0 -.5em rgba(0,168,255,1),
                               -2em  2em 0 -.5em rgba(140,122,230,1),
                               -3em  0em 0 -.5em rgba(255,159,243,1),
                               -2em -2em 0   0em rgba(72,84,96,1)
        }
        12.5% {
                box-shadow: 
                                0em -3em 0   0em rgba(231,76,60,1),
                                2em -2em 0  .2em rgba(230,126,34,1),
                                3em 0em  0   0em rgba(254,202,87,1),
                                2em  2em 0 -.5em rgba(76,209,55,1),
                                0em  3em 0 -.5em rgba(0,168,255,1),
                               -2em  2em 0 -.5em rgba(140,122,230,1),
                               -3em  0em 0 -.5em rgba(255,159,243,1),
                               -2em -2em 0 -.5em rgba(72,84,96,1)
        }
        25% {
                box-shadow: 
                                0em -3em 0 -.5em rgba(231,76,60,1),
                                2em -2em 0   0em rgba(230,126,34,1),
                                3em  0em 0  .2em rgba(254,202,87,1),
                                2em  2em 0   0em rgba(76,209,55,1),
                                0em  3em 0 -.5em rgba(0,168,255,1),
                               -2em  2em 0 -.5em rgba(140,122,230,1),
                               -3em  0em 0 -.5em rgba(255,159,243,1),
                               -2em -2em 0 -.5em rgba(72,84,96,1)
        }
        37.5% {
                box-shadow: 
                                0em -3em 0 -.5em rgba(231,76,60,1),
                                2em -2em 0 -.5em rgba(230,126,34,1),
                                3em 0em 0    0em rgba(254,202,87,1),
                                2em  2em 0  .2em rgba(76,209,55,1),
                                0em  3em 0   0em rgba(0,168,255,1),
                               -2em  2em 0 -.5em rgba(140,122,230,1),
                               -3em  0em 0 -.5em rgba(255,159,243,1),
                               -2em -2em 0 -.5em rgba(72,84,96,1)
        }
        50% {
                box-shadow: 
                                0em -3em 0 -.5em rgba(231,76,60,1),
                                2em -2em 0 -.5em rgba(230,126,34,1),
                                3em 0em 0  -.5em rgba(254,202,87,1),
                                2em  2em 0   0em rgba(76,209,55,1),
                                0em  3em 0  .2em rgba(0,168,255,1),
                               -2em  2em 0   0em rgba(140,122,230,1),
                               -3em  0em 0 -.5em rgba(255,159,243,1),
                               -2em -2em 0 -.5em rgba(72,84,96,1)
        }
        62.5% {
                box-shadow: 
                                0em -3em 0 -.5em rgba(231,76,60,1),
                                2em -2em 0 -.5em rgba(230,126,34,1),
                                3em 0em 0  -.5em rgba(254,202,87,1),
                                2em  2em 0 -.5em rgba(76,209,55,1),
                                0em  3em 0   0em rgba(0,168,255,1),
                               -2em  2em 0  .2em rgba(140,122,230,1),
                               -3em  0em 0   0em rgba(255,159,243,1),
                               -2em -2em 0 -.5em rgba(72,84,96,1)
        }
        75% {
                box-shadow: 
                                0em -3em 0 -.5em rgba(231,76,60,1),
                                2em -2em 0 -.5em rgba(230,126,34,1),
                                3em 0em 0  -.5em rgba(254,202,87,1),
                                2em  2em 0 -.5em rgba(76,209,55,1),
                                0em  3em 0 -.5em rgba(0,168,255,1),
                               -2em  2em 0   0em rgba(140,122,230,1),
                               -3em  0em 0  .2em rgba(255,159,243,1),
                               -2em -2em 0   0em rgba(72,84,96,1)
        }
        87.5% {
                box-shadow: 
                                0em -3em 0   0em rgba(231,76,60,1),
                                2em -2em 0 -.5em rgba(230,126,34,1),
                                3em 0em 0  -.5em rgba(254,202,87,1),
                                2em  2em 0 -.5em rgba(76,209,55,1),
                                0em  3em 0 -.5em rgba(0,168,255,1),
                               -2em  2em 0 -.5em rgba(140,122,230,1),
                               -3em  0em 0   0em rgba(255,159,243,1),
                               -2em -2em 0  .2em rgba(72,84,96,1)
        }
}
</style>
</head>
<body>
    <div class="load">鱼C工作室</div>
</body>
</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-11-25 06:25

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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