CSS
语言:
CSSSCSS
确定
body {
padding: 0px;
margin: 0px;
background: hsl(212, 50%, 50%);
}
.sun {
width: 40px;
height: 40px;
border-radius: 360px;
background: white;
right: 40px;
top: -120px;
position: absolute;
animation-name: sunrise;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-delay: .1;
animation-play-state: running;
animation-fill-mode: forwards;
}
@keyframes sunrise {
0% {
top: -120px;
}
25% {
top: 19px;
right: 40px;
}
50% {
top: 25px;
right: 40px;
}
100% {
top: 18px;
right: 40px;
}
}
.wmd1 {
-webkit-transform: scale(.6);
position: absolute;
top: 180px;
left: 200px;
perspective: 1000px;
}
.base {} .blades {
width: 350px;
height: 350px;
left: 10%;
top: 10%;
z-index: 2;
border-radius: 50%;
position: absolute;
margin-top: -30px;
margin-left: 50px;
animation: spin 6s linear infinite;
}
.blade1 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: -10px;
left: 150.5px;
transform: rotate(0deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade2 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: 105.5px;
left: 41px;
transform: rotate(-90deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade3 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: 105.5px;
right: 41px;
transform: rotate(-270deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade4 {
background: white;
position: absolute;
width: 41px;
height: 139px;
bottom: -10px;
left: 150.5px;
transform: rotate(180deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.vane1 {
width: 1px;
height: 350px;
left: 175px;
background: white;
position: absolute;
transform: rotate(90deg);
}
.vane2 {
width: 1px;
height: 350px;
left: 171.5px;
background: white;
position: absolute;
transform: rotate(180deg);
}
.base .bottom_base {
position: absolute;
width: 90px;
height: 100px;
left: 162px;
border-right: 16px solid transparent;
border-left: 16px solid transparent;
border-bottom: 380px solid white;
opacity: .8;
z-index: -1;
top: 42.5px;
}
ul {
position: absolute;
top: 180px;
left: -30px;
}
li {
width: 10px;
height: 10px;
background: white;
padding: 2px;
display: block;
margin: 30px;
box-shadow: inset 0px -2px 0px lightgray;
}
li:nth-child(2) {
position: absolute;
top: -45px;
left: 20px;
}
li:nth-child(1) {
position: absolute;
top: 35px;
left: 50px;
}
li:nth-child(3) {
position: absolute;
top: 75px;
left: 50px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}