加载特效（一）
2017-02-05 本文已影响0人
believedream
899.gif
运行代码：复制可用##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/* 去除默认样式*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
margin:0;
padding:0;
}
/*设置默认样式*/
html,body,ul{
width: 100%;
height: 100%;
background: skyblue;
position: relative;
}
ul{
display: flex;
justify-content: flex-start;
}
/*控制li标签*/
ul>li:nth-child(1){
width: 30px;
height: 30px;
left:100px;
top:100px;
transform-origin: center;
position: relative;
}
/*控制div*/
ul>li:nth-child(1) div{
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
}
/*设置动画*/
@keyframes cir1{
from{
opacity: 1;
}to{
opacity: 0.1;
}
}
/*第一部分*/
ul>li:nth-child(1) div:nth-child(1){
transform: rotate(0deg) translateY(50px) scale(0.9);
opacity: 0.1;
animation: cir1 1s 0.8s infinite;
}
ul>li:nth-child(1) div:nth-child(2){
transform: rotate(40deg) translateY(50px) scale(0.8);
opacity: 0.8;
animation: cir1 1s 0.7s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(3){
transform: rotate(80deg) translateY(50px) scale(0.8);
opacity: 0.7;
animation: cir1 1s 0.6s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(4){
transform: rotate(120deg) translateY(50px) scale(0.7);
opacity: 0.6;
animation: cir1 1s 0.5s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(5){
transform: rotate(160deg) translateY(50px) scale(0.6);
opacity: 0.5;
animation: cir1 1s 0.4s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(6){
transform: rotate(200deg) translateY(50px) scale(0.5);
opacity: 0.4;
animation: cir1 1s 0.3s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(7){
transform: rotate(240deg) translateY(50px) scale(0.4);
opacity: 0.3;
animation: cir1 1s 0.2s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(8){
transform: rotate(280deg) translateY(50px) scale(0.3);
opacity: 0.2;
animation: cir1 1s 0.1s steps(5) infinite;
}
ul>li:nth-child(1) div:nth-child(9){
transform: rotate(320deg) translateY(50px) scale(0.2);
opacity: 0.1;
animation: cir1 1s steps(5) infinite;
}
</style>
<body>
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</body>
</html>
录制_2017_02_05_20_54_46_559.gif
演示代码:(复制可用)##
注意：（ul的第一部分li标签不使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
margin:0;
padding:0;
}
html,body,ul{
width: 100%;
height: 100%;
background: skyblue;
position: relative;
}
ul{
display: flex;
justify-content: flex-start;
}
/*控制li标签*/
ul>li:nth-child(2){
width: 30px;
height: 30px;
/*background: red;*/
left:300px;
top:100px;
border-radius: 50%;
transform-origin: center;
position: relative;
}
/*控制div*/
ul>li:nth-child(2) div{
width: 10px;
height: 30px;
left: 10px;
border-radius: 5px;
background: black;
position: absolute;
}
@keyframes cir1{
from{
opacity: 1;
}to{
opacity: 0.1;
}
}
/*第二部分*/
ul>li:nth-child(2) div:nth-child(1){
transform: rotate(0deg) translateY(50px) ;
opacity: 0.1;
animation: cir1 1s 0.8s infinite;
}
ul>li:nth-child(2) div:nth-child(2){
transform: rotate(40deg) translateY(50px) ;
opacity: 0.8;
animation: cir1 1s 0.7s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(3){
transform: rotate(80deg) translateY(50px) ;
opacity: 0.7;
animation: cir1 1s 0.6s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(4){
transform: rotate(120deg) translateY(50px) ;
opacity: 0.6;
animation: cir1 1s 0.5s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(5){
transform: rotate(160deg) translateY(50px) ;
opacity: 0.5;
animation: cir1 1s 0.4s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(6){
transform: rotate(200deg) translateY(50px);
opacity: 0.4;
animation: cir1 1s 0.3s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(7){
transform: rotate(240deg) translateY(50px) ;
opacity: 0.3;
animation: cir1 1s 0.2s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(8){
transform: rotate(280deg) translateY(50px);
animation: cir1 1s 0.1s steps(5) infinite;
}
ul>li:nth-child(2) div:nth-child(9){
transform: rotate(320deg) translateY(50px) ;
opacity: 0.1;
animation: cir1 1s steps(5) infinite;
}
</style>
<body>
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</body>
</html>
