CSS
语言:
CSSSCSS
确定
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
transform-style: preserve-3d;
perspective: 500px;
height: 100vh;
width: 100vw;
margin: 0;
background: radial-gradient(circle at 50% 50%, #fff 20%, #7EC0EE 200%);
overflow: hidden;
}
#container {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
border-radius: 50%;
animation: rotate 10s linear infinite;
transform-style: preserve-3d
}
#container::after {
content: '';
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
border-width: 30px;
border-style: solid;
border-color: #3099d0 #60c9f0;
transform: rotate(45deg);
box-shadow: 0 0 0 5px #fff, inset 0 0 0 5px #fff;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 14px, transparent 14px);
top: 30px;
left: 30px;
animation: rotate 5s linear reverse infinite;
}
.quarter {
position: absolute;
width: 100px;
height: 100px;
background: #3099d0;
transition: all .5s;
}
#item1 {
top: 0;
left: 0;
border-top-left-radius: 100% 100%;
animation: angle1 10s linear infinite;
}
#item2 {
top: 0;
right: 0;
background: #60c9f0;
border-top-right-radius: 100% 100%;
animation: angle2 10s linear 7.5s infinite;
}
#item3 {
bottom: 0;
right: 0;
border-bottom-right-radius: 100% 100%;
animation: angle3 10s linear 5s infinite;
}
#item4 {
bottom: 0;
left: 0;
background: #60c9f0;
border-bottom-left-radius: 100% 100%;
animation: angle4 10s linear 2.5s infinite;
}
#container:hover,
#container:hover:after,
#container:hover div {
//animation-play-state: paused;
}
#container:hover #item1 {
transform: translate(-5px, -5px);
}
#container:hover #item2 {
transform: translate(5px, -5px);
}
#container:hover #item3 {
transform: translate(5px, 5px);
}
#container:hover #item4 {
transform: translate(-5px, 5px);
}
@keyframes rotate {
0% {
transform: rotateZ(0deg)
}
50% {
transform: rotateZ(180deg)
}
100% {
transform: rotateZ(360deg)
}
}
@keyframes angle1 {
0%, 25%, 100% {
border-top-left-radius: 100% 100%
}
12% {
border-top-left-radius: 0% 100%
}
12.5% {
border-top-left-radius: 0% 0%
}
13% {
border-top-left-radius: 100% 0%
}
}
@keyframes angle2 {
0%, 25%, 100% {
border-top-right-radius: 100% 100%
}
12% {
border-top-right-radius: 100% 0%
}
12.5% {
border-top-right-radius: 0% 0%
}
13% {
border-top-right-radius: 0% 100%
}
}
@keyframes angle3 {
0%, 25%, 100% {
border-bottom-right-radius: 100% 100%
}
12% {
border-bottom-right-radius: 0% 100%
}
12.5% {
border-bottom-right-radius: 0% 0%
}
13% {
border-bottom-right-radius: 100% 0%
}
}
@keyframes angle4 {
0%, 25%, 100% {
border-bottom-left-radius: 100% 100%
}
12% {
border-bottom-left-radius: 100% 0%
}
12.5% {
border-bottom-left-radius: 0% 0%
}
13% {
border-bottom-left-radius: 0% 100%
}
}