宇宙特效

来源：互联网发布：java自动化测试代码编辑：程序博客网时间：2024/04/29 00:08

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宇宙特效</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: url(images/bg.jpg);
}
ul{
width: 600px;
height: 600px;
list-style: none;
margin: 500px auto;
position: relative;
}
ul li{
width: 60px;
height: 60px;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
border-radius: 50%;
/*animation:change 3s linear infinite;*/
animation-name:change;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
li span{
position: absolute;
top: -6px;
left: 50%;
width: 10px;
height: 10px;
background: green;
border-radius: 5px;
}
.span1{
background: pink;
}
.span2{
background: orange;
}
.span3{
background: skyblue;
}
.span4{
background: red;
}
.span5{
background: yellow;
}
.span6{
background: purple;
}
.span7{
background: greenyellow;
}

li:nth-child(1){
width: 60px;
height: 60px;
box-shadow: 0 0 50px #c90;
background: #c90;
border: none;
animation-duration:1.2s;

}
li:nth-child(2){
width: 120px;
height: 120px;
animation-duration:2.2s;

}
li:nth-child(3){
width: 180px;
height: 180px;
animation-duration:3.2s;
}
li:nth-child(4){
width: 240px;
height: 240px;
animation-duration:5.2s;
/*background: url(images/asteroids_meteorids.png);*/

}
li:nth-child(5){
width: 300px;
height: 300px;
animation-duration:7.3s;
background: url(images/asteroids_meteorids.png);
background-size: cover;
}
li:nth-child(6){
width: 360px;
height: 360px;
animation-duration:17.2s;
}
li:nth-child(7){
width: 420px;
height: 420px;
animation-duration:4.2s;
}
li:nth-child(8){
width: 480px;
height: 480px;
animation-duration:13s;
}
li:nth-child(9){
width: 540px;
height: 540px;
animation-duration:5.2s;
}
li:nth-child(10){
width: 600px;
height: 600px;
animation-duration:15s;
}

@keyframes change{
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

0 0