今天我做了一个简单的动画，是关于loading的，曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。
我们做之前可以先看看他是什么样子的：
这个首先的思路就是，先设置一个大块，之后在大块中进行小块的设置，让小块之间进行间隔，如下图：
代码如下(html的）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哈哈</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div id="ddr">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
</body>
</html>
（css的）
@charset "UTF-8";
#ddr{
margin: 0 auto;
width: 70px;
height: 120px;
}
.ddr {
width: 10px;
height: 120px;
float: left;
margin: 2px;
background-color: #00ff00;
}
之后，我们就要想，要怎么实现上面的动态效果呢，我们可以看出，上面的小条条是一个一个来进行y轴上的缩放的，所以我们之后在进行设置：
代码：
.ddr{
animation: loading 1s infinite ease-in-out;
/*animation：动画名称 持续时间 无限次重复 开始和结束比较慢中间快*/
}
@keyframes loading {
0%,40%,100%{ /*定义每帧的动作*/
-webkit-transform: scaleY(0.5); /*在Y轴上进行缩放*/
}
20%{
-webkit-transform: scaleY(1);
}
}
之后我们会发现，他们在进行缩放的时候，是不同时间开始的，所以我们要设置开始执行的时间，我们先看看代码
.ddr2{
animation-delay: -0.9s;
}
.ddr3{
animation-delay: -0.8s;
}
.ddr4{
animation-delay: -0.7s;
}
.ddr5{
animation-delay: -0.6s;
}
有人看见代码肯定会说，为什么设置的时候不是让第二个小块在第0.1秒的时候进行开始，其实我当时也是写的0.1秒，但是写完之后，你会发现，如果设置0.1秒的话，因为我们在展示的时候是把它当成从短变长的，所以如果写0.1秒，它就会出现开始都是长的，然后变成短的的感觉，就不是想象中的样子了，你们可以自己试试。
总体的代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哈哈</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div id="ddr">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
</body>
</html>
@charset "UTF-8";
#ddr{
margin: 0 auto;
width: 70px;
height: 120px;
}
.ddr {
width: 10px;
height: 120px;
float: left;
margin: 2px;
background-color: #00ff00;
}
.ddr{
animation: loading 1s infinite ease-in-out;
/*animation：动画名称 持续时间 无限次重复 开始和结束比较慢中间快*/
}
.ddr2{
animation-delay: -0.9s;
}
.ddr3{
animation-delay: -0.8s;
}
.ddr4{
animation-delay: -0.7s;
}
.ddr5{
animation-delay: -0.6s;
}
@keyframes loading {
0%,40%,100%{ /*定义每帧的动作*/
-webkit-transform: scaleY(0.5); /*在Y轴上进行缩放*/
}
20%{
-webkit-transform: scaleY(1);
}
}
这样就可以啦！
网友评论