html5 转轮,CSS3 图钉和转轮

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%

}

}