【转】【网站】简单的CSS动画特效---- RGB走马灯边框线

【摘要】今天给大家分享一个简单的CSS动画:具体效果如下:所需要的最重要的样式是:clip也是本次教程的核心W3C对其的定义:好,预习完后我们开始本次的内容讲解:首先是HTML的布局:由于边框是用CSS的伪类前和...

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














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

好,预习完后我们开始本次的内容讲解
首先是HT+ML的布局:由于边框是用CSS的伪类前和后加上去的,所以次本。的布局非常简单

只需要一个DIV即可:

<body>
        <div class="box"></div>
</body>
好,接下来是对其添加样式:
首先是对格本身的样式,这里我为身体添加了背景色,以及清空了本身自带的保证金


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;
 
}
这时,我们已经可以看到格的基本形状了,接下来就是用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;
}





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

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

@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是前面没有设置的,这里加上,为了让其颜色变化
剪裁是裁剪图像:括号里面的4个值分别代表上右下左   

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


最后放上全部的代码:
ps:这里面的代码包含开始gif动画中演示那种,div中间又两个椭圆的那种,代码原理相似,不
单独拉出来了至此,本次教程结束,谢谢各位〜

<!doctype html>
<html lang="en">
        <head>
                <meta charset="UT+F-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>


分享本文至:

 MCtech
 简介:有任何需要都可以留言,本站尽力去寻找资源,如果资源失效,加群获取最新链接。由于本站常年亏损,顺带招收广告和赞助&amp;amp;&amp;amp;QQ群:486153251免费加群如果喜欢请赞助我们,我们不仅生产少部分资源,我们还是网络界的搬运工。

发表评论

游客
送你一朵小花花~

帅人已评(0)