LOADING...效果
2019-08-02 本文已影响28人
我爱罗是个程序猿
偶然看到一个CSS载入动画，看到挺不错的，于是。。。
下面是静图：
不是动图.png
整个页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" bigboxtent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" bigboxtent="ie=edge">
<title>Document</title>
<style>
body {
background-color: #333;
}
.bigbox {
width: 380px;
height: 270px;
margin: 150px auto 0;
}
.bigbox div {
height: 200px;
width: 24px;
margin: 15px;
float: left;
background: #ddd;
border-radius: 12px;
}
.bigbox p {
text-align: center;
font-size: 18px;
color: #fff;
}
.bigbox .box:nth-child(1) {
background-color: #20c070;
animation: mymove 500ms ease 0ms infinite alternate;
}
.bigbox .box:nth-child(2) {
background-color: #3090d0;
animation: mymove 500ms ease 100ms infinite alternate;
}
.bigbox .box:nth-child(3) {
background-color: #9050b0;
animation: mymove 500ms ease 200ms infinite alternate;
}
.bigbox .box:nth-child(4) {
background-color: #e07020;
animation: mymove 500ms ease 300ms infinite alternate;
}
.bigbox .box:nth-child(5) {
background-color: #c03020;
animation: mymove 500ms ease 400ms infinite alternate;
}
.bigbox .box:nth-child(6) {
background-color: #e04030;
animation: mymove 500ms ease 500ms infinite alternate;
}
.bigbox .box:nth-child(7) {
background-color: #e04080;
animation: mymove 500ms ease 600ms infinite alternate;
}
@keyframes mymove {
/* 2d缩放 */
from {
transform: scale(1, 0.3);
}
to {
transform: scale(1, 1);
}
}
</style>
</head>
</style>
<body>
<div class="bigbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<p>LOADING...</p>
</div>
</body>
</html>
使用@keyframes可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字from和to，这是和0％到100％相同。0％是开头，100％是完成，并且始终定义为0％和100％的选择器。
这里要注意的是: 使用animation属性来控制动画的外观，还是使用选择器绑定动画。
干一行，爱一行，学到老，活到老~
