CSS
语言:
CSSSCSS
确定
html {
height: 100%;
}
body {
overflow: hidden;
-webkit-animation: dn 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation: dn 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div {
position: absolute;
left: calc(50% - 750px);
top: 85%;
width: 1500px;
height: 1500px;
background-color: silver;
opacity: 1;
-webkit-animation: rotate 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation: rotate 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid white;
border-width: 50px 0px;
border-radius: 200px;
}
div::after,
div::before {
content: " ";
position: absolute;
width: 1500px;
height: 1500px;
background-color: green;
transform: rotate(30deg);
border-radius: 550px;
border: 1px solid #060;
border-width: 0px 50px;
}
div::before {
background-color: #469a3d;
border-color: green;
transform: rotate(60deg);
border-radius: 400px;
}
div div {
left: -150px;
top: -150px;
height: 100px;
width: 100px;
border-radius: 10px;
background-color: yellow;
border: 0;
}
div div::after,
div div::before {
background-color: yellow;
height: 100px;
width: 100px;
border-radius: 10px;
border: 0;
}
@keyframes rotate {
0% {
transform: rotate(1deg);
}
30% {
opacity: 1;
}
45% {
opacity: 0.2;
}
50% {
transform: rotate(180deg);
}
75% {
opacity: 0.2;
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
transform: rotate(1deg);
}
30% {
opacity: 1;
}
45% {
opacity: 0.2;
}
50% {
transform: rotate(180deg);
}
75% {
opacity: 0.2;
}
100% {
transform: rotate(360deg);
}
}
@keyframes dn {
0% {
background-color: #f4d9e7;
}
20% {
background-color: lightblue;
}
40% {
background-color: #300030;
}
43%,
80% {
background-color: black;
}
100% {
background-color: #f4d9e7;
}
}
@-webkit-keyframes dn {
0% {
background-color: #f4d9e7;
}
20% {
background-color: lightblue;
}
40% {
background-color: #300030;
}
43%,
80% {
background-color: black;
}
100% {
background-color: #f4d9e7;
}
}