好友
阅读权限100
听众
最后登录1970-1-1
|
含笑阁
发表于 2019-4-2 22:51
本帖最后由 含笑阁 于 2019-4-2 22:52 编辑
今天给大家分享一个简单的CSS动画：
具体效果如下：
所需要的最重要的样式是：clip 也是本次教程的核心
W3C对其的定义：
好，预习完后我们开始本次的内容讲解：
首先是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>
|
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
发表于 2019-4-2 23:06
|
发表于 2019-4-2 23:10
只能说没啥用
