【web】简单的CSS动画特效----RGB走马灯边框线
本帖最后由 含笑阁 于 2019-4-2 22:52 编辑今天给大家分享一个简单的CSS动画：
具体效果如下：
所需要的最重要的样式是：clip 也是本次教程的核心
W3C对其的定义：
好，预习完后我们开始本次的内容讲解：
首先是HTML的布局：由于边框是用CSS的伪类before和after加上去的，所以本次的布局非常简单
只需要一个div即可：
<body>
<div class="box"></div>
</body>
好，接下来是对其添加样式：
首先是对div本身的样式，这里我为body添加了背景色，以及清空了本身自带的margin
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为其添加外层的边框
.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预习一下{:301_1001:}
@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个值分别代表上右下左
有兴趣的同学可以自行研究一下~{:301_978:}
最后放上全部的代码：
ps：这里面的代码包含开始gif动画中演示那种，div中间又两个椭圆的那种，代码原理相似，不单独拉出来了
至此，本次教程结束，谢谢各位~
<!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>
;www只能说没啥用 Nemoris丶 发表于 2019-4-2 23:06
只能说没啥用
哈哈，单独拉出来确实用处不大，但是稍微改改，加给表单元素，动画改成获取焦点触发，就可以变成新的功能{:301_1001:}
只是想让大家了解下这个功能了，然后扩展出更好的内容~
大家一起努力，一起学习，一起进步;www 想问下 像 135微信编辑器 96编辑器等微信第三方编辑器
是不是都是运用了CSS技术， 想学的话从何开始最好？ 看不懂 那里可学习这些技术？ 天阶 发表于 2019-4-3 00:43
看不懂 那里可学习这些技术？
想学的话，论坛里好多web前端教程;www 前端大牛，膜拜一下！ wongjiawei 发表于 2019-4-2 23:54
想问下 像 135微信编辑器 96编辑器等微信第三方编辑器
是不是都是运用了CSS技术， 想学的话从何 ...
那些第三方编辑器就相当于前端里的富文本编辑器，方便在发表文章时的排版，不用自己来写html标签，他们会直接生成带标签的内容。
我看了他们的编辑器，他们生成是内容之间链接到了他们的css样式表
如果想要学习css的话 可以看看论坛内的web前端教学，如果只是想学css这一块的话，可以单独只听HTML和CSS这一块 含笑阁 发表于 2019-4-3 09:34
那些第三方编辑器就相当于前端里的富文本编辑器，方便在发表文章时的排版，不用自己来写html标签，他们会 ...
谢谢指教 谢谢分享!学习一下了!
页:
[1]
2