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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 6 2 - 三点唤醒Loading动画 - 2.0
返回列表 发新帖
查看: 3416|回复: 9

[庖丁解牛] 0 0 6 2 - 三点唤醒Loading动画 - 2.0

[复制链接]
不二如是
发表于 2017-3-4 14:33:29 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2021-8-11 09:37 编辑

在61我们介绍了“拖尾”的玩法。

算是animation的@keyframes load-effect简单玩法，这次分享一个更有意思的～

对了，安利一下，border-radius不会的，请点这里

本帖的重点是“box-shadow”高级玩法，入门请看 0 0 3 3 - Shadow之块状元素阴影
Snip20170304_664.png


本次演示单位用em，1em = 16px。

上代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;

            box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;
        }

    </style>
</head>
<body>
    <div class="load">鱼C-不二如是</div>
</body>
</html>
效果图：
Snip20170304_665.png


不是说好了box-shadow是负责设置阴影的吗？！

那这三个圈，咋来的？


先憋着急，为load添加一个背景色
Snip20170304_669.png


打个广告，看到WebStorm的编辑器的性感了嘛？！欲知更多详情，请点这里

效果图：
Snip20170304_667.png


其实这三个白点仍然是box-shadow生成的三个阴影。

只不过是颜色是白色，并且由于本尊通过border-radius设置为圆形，他们也是圆形了。

box-shadow的有5个属性值，所以干了五件事：

☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。

☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。

☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。

☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。

☆第五个参数（#FFF，#FFF，#FFF），设置颜色。

这四个参数就是本帖的重点！


现在只要在@keyframe load-effect{}中多次设置box-shadow不就可以产生渐变效果了吗？！

注释掉box-shadow，完成代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>n帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;

            /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
            /*background: #8C0044;*/
            animation: load-effect 0.99s infinite linear;

        }

        @keyframes load-effect {
            0%{
                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
            }
            25%{
                box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
            }
            50%{
                box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
            }
            75%{
                box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
            }
            100%{
                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
            }
        }

    </style>
</head>
<body>
    <div class="load">鱼C-不二如是</div>
</body>
</html>
效果图：
1.gif


在animation动画中，分别定义0%、25%、50%、75%、100%五种动画状态。

顺便多加了多加了个点，4个点颜色各不相同。

同一行，不同列的大小变化都遵循：

->1->0.5em->0->-0.5em->


每个值在同一行只出现一次，列可以重复。

相信聪明如你，一点就透～


这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅 ）


官方 Web 课程：

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献！
shishunfu + 5 + 5 + 3 支持楼主！

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

shishunfu
发表于 2017-5-12 15:17:46 | 显示全部楼层
交作业
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>3帧动画</title>

        <style type="text/css">
                body{
                        background: #000;
                }
                .load{
                        font-size: 33px;
                        width: 1em;
                        height: 1em;
                        border-radius: 50%;
                        position: relative;
                        animation: load-effect 0.99s infinite linear;
                        /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/  
/*        ☆第一个参数，代表距离左侧的水平位移距离。
        ☆第二个参数，代表距离上侧的纵向移动距离。
        ☆第三个参数，代表清晰度，0则没有模糊效果。
        ☆第四个参数，代表圆点大小，1.5em表示将阴影外扩3/2宽度。
        ☆第五个参数，设置颜色。
*/
                        
                }
                @keyframes load-effect {
                        0%{
                                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
                                
                        }
                        25%{
                                box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
                        }
                        50%{
                                box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
                        }
                        75%{
                                box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
                        }
                        100%{
                                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
                        }
                }
        </style>
</head>
<body>
<div class="load"></div>
</body>
</html>
00493帧动画.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-12 21:44
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-6 08:13:19 | 显示全部楼层
交作业！
062.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-7-2 22:17:54 | 显示全部楼层
交作业：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;
            /*
            ☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。
            ☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。
            ☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。
            ☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。
            ☆第五个参数（#FFF，#FFF，#FFF），设置颜色。
            */
            animation:load-effect 0.99s infinite linear;

        }
        @keyframes load-effect{
            0%{
                box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
            }
            25%{
                box-shadow: 3em 2em 10px 0.5em #FCC,6em 2em 10px 0 #9F9,9em 2em 10px -0.5em #CCF,12em 2em 10px 1em #F7F;
            }
            50%{
                box-shadow: 3em 2em 10px 0 #FCC,6em 2em 10px -0.5em #9F9,9em 2em 10px 1em #CCF,12em 2em 10px 0.5em #F7F;
            }
            75%{
                box-shadow: 3em 2em 10px -0.5em #FCC,6em 2em 10px 1em #9F9,9em 2em 10px 0.5em #CCF,12em 2em 10px 0 #F7F;
            }
            100%{
                box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
            }
        }
</style>
</head>

<body>
<div class="load">鱼C-不二如是</div>
</body>
</html>
62.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-27 13:23:06 | 显示全部楼层
webstorm确实很强大，两天就帮我养成了忘写分号的好习惯 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0062-3帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;  /*都™ -8888em了，还要设置字体大小干嘛*/
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;
            /*background: #45ccd6;*/
            /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.3em #FFF;*/
            animation: loading 1s infinite linear;
        }
        @keyframes loading
        {
            0%
            {
                box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
            }
            25%
            {
                box-shadow: 3em 2em 0.5em 1em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
            }
            50%
            {
                box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0.5em 1em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
            }
            75%
            {
                box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0.5em 1em #CCF,12em 2em 0 0.2em #F7F;
            }
            100%
            {
                box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0.5em 1em #F7F;
            }
        }

    </style>
</head>
<body>
<div class="load">鱼C-STmove</div>
</body>
</html>
GIF.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

MSK
发表于 2018-7-28 21:38:36 | 显示全部楼层
交作业
<!DOCTYPE html>
<html>
<head>
        <title>三点打开loading</title>
        <meta charset="utf-8">
        <style type="text/css">
                @keyframes loading{
                        0%{
                                box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
                        }
                        12.5%{
                                box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 1em #fff;
                        }
                        25%{
                                box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 1.5em #fff;
                        }
                        37.5%{
                                box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 1.5em #fff, 14em 2em 0 1em #fff;
                        }
                        50%{
                                box-shadow: 2em 2em 0 1.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 0.5em #fff;
                        }
                        62.5%{
                                box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 0em #fff;
                        }
                        75%{
                                box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 -0.5em #fff;
                        }
                        87.5%{
                                box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 -0.5em #fff, 14em 2em 0 0em #fff;
                        }
                        100%{
                                box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
                        }
                }
                body{
                        background: #000;
                }
                .load{
                        box-sizing: border-box;
                        width: 2.0em;
                        height: 2.0em;
                        border-radius: 50%;
                        background: #f0f;
                        text-indent: -999px;
                        box-shadow: box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
                        animation: loading 1.3s infinite linear;
                }
        </style>
</head>
<body>
        <div class="load">loading</div>
</body>
</html>
tmp.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-6 22:23:43 | 显示全部楼层
lei 了 lei 了 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
* {
        margin:0;
        padding:0;
}
body {
        background: #000;
}
.load {
        font-size: 33px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -8888em;
        animation:flash 5s infinite linear;
}
@keyframes flash{
        0% {
                box-shadow:3em 2em 0    1em rgba(156,136,255,1),
                           6em 2em 0  0.5em rgba(0,168,255,1),
                           9em 2em 0    0em rgba(232,65,24,1),
                          12em 2em 0 -0.5em rgba(76,209,55,1)
        }                
        25% {
                box-shadow:3em 2em 0   0.5em rgba(156,135,255),
                           6em 2em 0     0em rgba(0,168,255),
                           9em 2em 0  -0.5em rgba(232,65,24),
                          12em 2em 0     1em rgba(76,209,55)
        }      
        50% {
                box-shadow:3em 2em 0     0em rgba(156,136,255),
                           6em 2em 0  -0.5em rgba(0,168,255),
                           9em 2em 0     1em rgba(232,65,24),
                          12em 2em 0   0.5em rgba(76,209,55)
        }
        75% {
                box-shadow:3em 2em 0  -0.5em rgba(156,136,255),
                           6em 2em 0     1em rgba(0,168,255),
                           9em 2em 0   0.5em rgba(232,65,24),
                          12em 2em 0     0em rgba(76,209,55)
        }
        100% {
                box-shadow:3em 2em 0     1em rgba(156,136,255),
                           6em 2em 0   0.5em rgba(0,168,255),
                           9em 2em 0     0em rgba(232,65,24),
                          12em 2em 0  -0.5em rgba(76,209,55)
        }
}
</style>
</head>
<body>
    <div class="load">让编程改变世界</div>
</body>
</html>
三帧.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-11 13:34:15 | 显示全部楼层 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>n帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;

            /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
            /*background: #8C0044;*/
            animation: load-effect 0.99s infinite linear;

        }

        @keyframes load-effect {
            0%{
                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
            }
            25%{
                box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
            }
            50%{
                box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
            }
            75%{
                box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
            }
            100%{
                box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
            }
        }

    </style>
</head>
<body>
    <div class="load">鱼C-不二如是</div>
</body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-18 22:11:49 | 显示全部楼层

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 08:58

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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