html5 css3摩天轮,CSS3 摩天轮旋转帧样式的时钟

CSS

语言：

CSSSCSS

确定

html {

background-color: #1d1f20;

}

* {

box-sizing: border-box;

}

@keyframes rotate-frame {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

@keyframes rotate-hour {

from {

transform: rotate(480deg);

}

to {

transform: rotate(840deg);

}

}

@keyframes rotate-minute {

from {

transform: rotate(240deg);

}

to {

transform: rotate(3840deg);

}

}

@keyframes rotate-second {

from {

transform: rotate(420deg);

}

to {

transform: rotate(5820deg);

}

}

.clock {

position: relative;

width: 300px;

height: 300px;

border-radius: 150px;

margin: 0 auto;

}

.clock #hands #h {

position: absolute;

width: 5px;

height: 100px;

background-color: lightgrey;

top: 49%;

left: 49%;

transform-origin: top;

animation: 10s rotate-hour ease infinite;

}

.clock #hands #m {

position: absolute;

width: 3px;

height: 125px;

top: 49%;

left: 49%;

background-color: lightgrey;

transform-origin: top;

animation: 10s rotate-minute ease infinite;

}

.clock #hands #s {

position: absolute;

width: 4px;

height: 105px;

top: 49%;

left: 49.5%;

background-color: #38a4ff;

transform-origin: top;

animation: 10s rotate-second ease infinite;

}

.clock #hands #s #s-end {

width: 20px;

height: 20px;

border-radius: 20px;

border: 4px solid #38a4ff;

position: absolute;

top: 96%;

left: -8px;

}

.clock #border {

width: 300px;

height: 300px;

animation: 60s rotate-frame linear infinite;

transform-origin: center;

margin: 0 auto;

}

.clock #border .dot {

display: inline-block;

width: 3px;

height: 3px;

border-radius: 3px;

background-color: lightgrey;

box-shadow: 0px 0px 5px black;

}

.clock #border .dot-wrapper {

position: absolute;

top: 141px;

left: 3px;

padding-right: 290px;

}

.clock #border .dot-wrapper#dot-1 {

transform: rotate(9deg);

}

.clock #border .dot-wrapper#dot-2 {

transform: rotate(18deg);

}

.clock #border .dot-wrapper#dot-3 {

transform: rotate(27deg);

}

.clock #border .dot-wrapper#dot-4 {

transform: rotate(36deg);

}

.clock #border .dot-wrapper#dot-5 {

transform: rotate(45deg);

}

.clock #border .dot-wrapper#dot-6 {

transform: rotate(54deg);

}

.clock #border .dot-wrapper#dot-7 {

transform: rotate(63deg);

}

.clock #border .dot-wrapper#dot-8 {

transform: rotate(72deg);

}

.clock #border .dot-wrapper#dot-9 {

transform: rotate(81deg);

}

.clock #border .dot-wrapper#dot-10 {

transform: rotate(90deg);

}

.clock #border .dot-wrapper#dot-11 {

transform: rotate(99deg);

}

.clock #border .dot-wrapper#dot-12 {

transform: rotate(108deg);

}

.clock #border .dot-wrapper#dot-13 {

transform: rotate(117deg);

}

.clock #border .dot-wrapper#dot-14 {

transform: rotate(126deg);

}

.clock #border .dot-wrapper#dot-15 {

transform: rotate(135deg);

}

.clock #border .dot-wrapper#dot-16 {

transform: rotate(144deg);

}

.clock #border .dot-wrapper#dot-17 {

transform: rotate(153deg);

}

.clock #border .dot-wrapper#dot-18 {

transform: rotate(162deg);

}

.clock #border .dot-wrapper#dot-19 {

transform: rotate(171deg);

}

.clock #border .dot-wrapper#dot-20 {

transform: rotate(180deg);

}

.clock #border .dot-wrapper#dot-21 {

transform: rotate(189deg);

}

.clock #border .dot-wrapper#dot-22 {

transform: rotate(198deg);

}

.clock #border .dot-wrapper#dot-23 {

transform: rotate(207deg);

}

.clock #border .dot-wrapper#dot-24 {

transform: rotate(216deg);

}

.clock #border .dot-wrapper#dot-25 {

transform: rotate(225deg);

}

.clock #border .dot-wrapper#dot-26 {

transform: rotate(234deg);

}

.clock #border .dot-wrapper#dot-27 {

transform: rotate(243deg);

}

.clock #border .dot-wrapper#dot-28 {

transform: rotate(252deg);

}

.clock #border .dot-wrapper#dot-29 {

transform: rotate(261deg);

}

.clock #border .dot-wrapper#dot-30 {

transform: rotate(270deg);

}

.clock #border .dot-wrapper#dot-31 {

transform: rotate(279deg);

}

.clock #border .dot-wrapper#dot-32 {

transform: rotate(288deg);

}

.clock #border .dot-wrapper#dot-33 {

transform: rotate(297deg);

}

.clock #border .dot-wrapper#dot-34 {

transform: rotate(306deg);

}

.clock #border .dot-wrapper#dot-35 {

transform: rotate(315deg);

}

.clock #border .dot-wrapper#dot-36 {

transform: rotate(324deg);

}

.clock #border .dot-wrapper#dot-37 {

transform: rotate(333deg);

}

.clock #border .dot-wrapper#dot-38 {

transform: rotate(342deg);

}

.clock #border .dot-wrapper#dot-39 {

transform: rotate(351deg);

}

.clock #border .dot-wrapper#dot-40 {

transform: rotate(360deg);

}

.clock #center {

width: 25px;

height: 25px;

background-color: #38a4ff;

position: absolute;

border-radius: 50px;

top: 50%;

left: 45.8%;

transform: translateY(-50%);

}

h2 {

font-family: "Open Sans", sans-serif;

color: white;

font-weight: 300;

font-size: 1.1rem;

text-align: center;

}

h2 a {

color: skyblue;

text-decoration: none;

border-bottom: 1px dotted skyblue;

padding-bottom: 5px;

}