吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 5592|回复: 10
收起左侧

[其他原创] 【web】简单的CSS动画特效----RGB走马灯边框线

[复制链接]
含笑阁 发表于 2019-4-2 22:51
本帖最后由 含笑阁 于 2019-4-2 22:52 编辑

今天给大家分享一个简单的CSS动画:
具体效果如下: 1.gif














所需要的最重要的样式是:clip 也是本次教程的核心
W3C对其的定义:
detail.png

好,预习完后我们开始本次的内容讲解:
首先是HTML的布局:由于边框是用CSS的伪类before和after加上去的,所以本次的布局非常简单
只需要一个div即可:
[HTML] 纯文本查看 复制代码
<body>
        <div class="box"></div>
</body>

好,接下来是对其添加样式:
首先是对div本身的样式,这里我为body添加了背景色,以及清空了本身自带的margin
[CSS] 纯文本查看 复制代码
body {
        margin: 0;
        background: #333;
}

.box {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #cb6341;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;

}

这时,我们已经可以看到div的基本形状了,接下来就是用CSS中的伪类before和after为其添加外层的边框
[CSS] 纯文本查看 复制代码
.box:after,
.box:before {
        content: '';
        width: 220px;
        height: 220px;
        box-sizing: border-box;
        border: 1px solid;
        position: absolute;
        top: -5%;
        left: -5%;
        animation: boxBorder 6s linear infinite;
}
.box:before {
        animation-delay: -3s;
}

上面的代码我需要说明一下:
首先,这次里并没有设置边框的颜色,是为了在接下来的动画中动态的改变yanse
其次,为before添加了动画延迟,为了方式和after重叠在一起。

好了,接下来就是本次教程的核心内容了,动画!如果懂的话,可以去W3C预习一下


[CSS] 纯文本查看 复制代码
@keyframes boxBorder {
        0% {
                border-color: #fff;
                clip: rect(0, 220px, 2px, 0);
        }
        25% {
                border-color: yellow;
                clip: rect(0px, 2px, 220px, 0)
        }
        50% {
                border-color: blue;
                clip: rect(218px, 220px, 220px, 0)
        }
        75% {
                border-color: green;
                clip: rect(0, 220px, 220px, 218px)
        }
        100% {
                border-color: #fff;
                clip: rect(0, 220px, 2px, 0)
        }
}

说明一下:这里的border-color是前面没有设置的,这里加上,为了让其颜色变化
clip是裁剪图像:括号里面的4个值分别代表  上  右  下  左  

有兴趣的同学可以自行研究一下~


最后放上全部的代码:
ps:这里面的代码包含开始gif动画中演示那种,div中间又两个椭圆的那种,代码原理相似,不单独拉出来了
至此,本次教程结束,谢谢各位~
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <style>
                        body {
                                margin: 0;
                                background: #333;
                        }

                        .box {
                                width: 200px;
                                height: 200px;
                                box-sizing: border-box;
                                border: 1px solid #cb6341;
                                position: fixed;
                                left: 50%;
                                top: 50%;
                                margin-top: -100px;
                                margin-left: -100px;

                        }

                        .box:after,
                        .box:before {
                                content: '';
                                width: 220px;
                                height: 220px;
                                box-sizing: border-box;
                                border: 1px solid;
                                position: absolute;
                                top: -5%;
                                left: -5%;
                                animation: boxBorder 6s linear infinite;
                        }

                        .box:before {
                                animation-delay: -3s;
                        }

                        .box .icon {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 100px;
                                height: 100px;
                                margin-top: -50px;
                                margin-left: -50px;
                                animation: iconBox 3s linear infinite;
                        }

                        .box .icon:after,
                        .box .icon:before {
                                content: "";
                                width: 40%;
                                height: 100%;
                                box-sizing: border-box;
                                border-radius: 50%;
                                border: 2px solid #fff;
                                position: absolute;
                                top: 0;
                                left: 30px;
                                animation: iconBorder 3s linear infinite;
                        }

                        .box .icon:after {
                                transform: rotate(60deg);
                        }

                        .box .icon:before {
                                transform: rotate(-60deg);
                        }

                        .box .icon2:before {
                                transform: rotate(0deg);
                        }

                        .box .icon2:after {
                                height: 10px;
                                width: 10px;
                                background-color: #fff;
                                transform: translate(12px, -6px);
                                border: 3px solid #333;
                                box-sizing: content-box;
                                animation: iconYuan 3s linear infinite 0.6s;
                        }

                        @keyframes iconBox {
                                0% {
                                        transform: rotate(0deg);
                                }

                                100% {
                                        transform: rotate(360deg);
                                }
                        }

                        @keyframes iconBorder {
                                0% {
                                        border-color: #fff;
                                }

                                30% {
                                        border-color: yellow;
                                }

                                60% {
                                        border-color: blue;
                                }

                                100% {
                                        border-color: red;
                                }
                        }

                        @keyframes iconYuan {
                                0% {
                                        background-color: #fff;
                                }

                                30% {
                                        background-color: yellow;
                                }

                                60% {
                                        background-color: blue;
                                }

                                100% {
                                        background-color: red;
                                }
                        }

                        @keyframes boxBorder {
                                0% {
                                        border-color: #fff;
                                        clip: rect(0, 220px, 2px, 0);
                                }

                                25% {
                                        border-color: yellow;
                                        clip: rect(0px, 2px, 220px, 0)
                                }

                                50% {
                                        border-color: blue;
                                        clip: rect(218px, 220px, 220px, 0)
                                }

                                75% {
                                        border-color: green;
                                        clip: rect(0, 220px, 220px, 218px)
                                }

                                100% {
                                        border-color: #fff;
                                        clip: rect(0, 220px, 2px, 0)
                                }
                        }
                </style>

        </head>
        <body>
                <div class="box">
                        <div class="icon icon1"></div>
                        <div class='icon icon2'></div>
                </div>
        </body>
</html>


免费评分

参与人数 2吾爱币 +4 热心值 +2 收起 理由
孤独色的夜 + 1 + 1 观望一下大佬。
wushaominkk + 3 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Nemoris丶 发表于 2019-4-2 23:06
只能说没啥用
 楼主| 含笑阁 发表于 2019-4-2 23:10

哈哈,单独拉出来确实用处不大,但是稍微改改,加给表单元素,动画改成获取焦点触发,就可以变成新的功能
只是想让大家了解下这个功能了,然后扩展出更好的内容~

大家一起努力,一起学习,一起进步
wongjiawei 发表于 2019-4-2 23:54
想问下 像 135微信编辑器   96编辑器  等微信第三方编辑器  

是不是都是运用了CSS技术, 想学的话  从何开始最好?
天阶 发表于 2019-4-3 00:43
看不懂 那里可学习这些技术?
 楼主| 含笑阁 发表于 2019-4-3 08:27
天阶 发表于 2019-4-3 00:43
看不懂 那里可学习这些技术?

想学的话,论坛里好多web前端教程
yqesl1 发表于 2019-4-3 09:28
前端大牛,膜拜一下!
 楼主| 含笑阁 发表于 2019-4-3 09:34
wongjiawei 发表于 2019-4-2 23:54
想问下 像 135微信编辑器   96编辑器  等微信第三方编辑器  

是不是都是运用了CSS技术, 想学的话  从何 ...

那些第三方编辑器就相当于前端里的富文本编辑器,方便在发表文章时的排版,不用自己来写html标签,他们会直接生成带标签的内容。

我看了他们的编辑器,他们生成是内容之间链接到了他们的css样式表

如果想要学习css的话 可以看看论坛内的web前端教学,如果只是想学css这一块的话,可以单独只听HTML和CSS这一块
wongjiawei 发表于 2019-4-3 11:04
含笑阁 发表于 2019-4-3 09:34
那些第三方编辑器就相当于前端里的富文本编辑器,方便在发表文章时的排版,不用自己来写html标签,他们会 ...

谢谢指教
hlh2518 发表于 2019-4-3 17:01
谢谢分享!学习一下了!
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 21:05

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

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