<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.animation {
width: 100%;
height: 800px;
margin: 30px auto;
position: relative;
background:pink;
z-index:0;
}
.zhuxin{
width:20px;
height:20px;
background:transparent;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
animation: whirl 6s infinite linear;
z-index:5;
}
.shanye {
width: 15px;
height: 4px;
border-width:18px 160px 0px 0px;
/* 上右下左 */
border-style: solid solid none none;
border-color: #fff transparent transparent transparent;
border-radius:20px 30px 0 0;
position: absolute;
left:10px;
top:40%;
transform-origin: 0 0;
z-index:7;
opacity: 0.6;
}
.shanye.one {
transform:rotate(60deg);
}
.shanye.two {
transform:rotate(120deg);
}
.shanye.three {
transform: rotate(180deg);
}
.shanye.four {
transform:rotate(240deg);
}
.shanye.five {
transform:rotate(300deg);
}
@keyframes whirl {
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.bing {
width: 10px;
height: 260px;
background: #fff;
opacity: 0.5;
position: absolute;
left: 50%;
margin-left: 10px;
top: 53%;
border-radius: 5px;
z-index:3;
}
@keyframes sport {
form {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(720deg)
}
}
</style>
</head>
<body>
<div class="animation" id='animation'>
<div class="zhuxin">
<p class='shanye one'>
</p>
<p class='shanye two'>
</p>
<p class='shanye three'>
</p>
<p class='shanye four'>
</p>
<p class='shanye five'>
</p>
<p class='shanye six'>
</p>
</div>
<span class='bing'></span>
</div>
</body>
</html>
最終的效果如上圖