css旋转的圆,CSS3 旋转的圆环

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

overflow: hidden;

padding-top: 50vh;

padding-left: 50vw;

margin-top: 2.5vh;

background: black;

}

body .cs {

box-sizing: border-box;

position: relative;

height: 5vh;

width: 5vh;

margin: -5vh -2.5vh;

border-radius: 100%;

border: 3px solid;

-webkit-animation: unreel 20s ease-in-out infinite alternate;

animation: unreel 20s ease-in-out infinite alternate;

}

body .cs:nth-of-type(1) {

-webkit-transform-origin: center -5vh;

-ms-transform-origin: center -5vh;

transform-origin: center -5vh;

top: 7.5vh;

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(2) {

-webkit-transform-origin: center -10vh;

-ms-transform-origin: center -10vh;

transform-origin: center -10vh;

top: 12.5vh;

-webkit-transform: rotateZ(240deg);

transform: rotateZ(240deg);

color: rgba(128, 255, 0, 0.8);

}

body .cs:nth-of-type(3) {

-webkit-transform-origin: center -10vh;

-ms-transform-origin: center -10vh;

transform-origin: center -10vh;

top: 12.5vh;

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

color: rgba(128, 255, 0, 0.8);

}

body .cs:nth-of-type(4) {

-webkit-transform-origin: center -10vh;

-ms-transform-origin: center -10vh;

transform-origin: center -10vh;

top: 12.5vh;

-webkit-transform: rotateZ(480deg);

transform: rotateZ(480deg);

color: rgba(128, 255, 0, 0.8);

}

body .cs:nth-of-type(5) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(300deg);

transform: rotateZ(300deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(6) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(7) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(420deg);

transform: rotateZ(420deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(8) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(480deg);

transform: rotateZ(480deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(9) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(540deg);

transform: rotateZ(540deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(10) {

-webkit-transform-origin: center -15vh;

-ms-transform-origin: center -15vh;

transform-origin: center -15vh;

top: 17.5vh;

-webkit-transform: rotateZ(600deg);

transform: rotateZ(600deg);

color: rgba(0, 255, 64, 0.8);

}

body .cs:nth-of-type(11) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(440deg);

transform: rotateZ(440deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(12) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(480deg);

transform: rotateZ(480deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(13) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(520deg);

transform: rotateZ(520deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(14) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(560deg);

transform: rotateZ(560deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(15) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(600deg);

transform: rotateZ(600deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(16) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(640deg);

transform: rotateZ(640deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(17) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(680deg);

transform: rotateZ(680deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(18) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(720deg);

transform: rotateZ(720deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(19) {

-webkit-transform-origin: center -20vh;

-ms-transform-origin: center -20vh;

transform-origin: center -20vh;

top: 22.5vh;

-webkit-transform: rotateZ(760deg);

transform: rotateZ(760deg);

color: rgba(0, 255, 255, 0.8);

}

body .cs:nth-of-type(20) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(600deg);

transform: rotateZ(600deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(21) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(630deg);

transform: rotateZ(630deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(22) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(660deg);

transform: rotateZ(660deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(23) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(690deg);

transform: rotateZ(690deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(24) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(720deg);

transform: rotateZ(720deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(25) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(750deg);

transform: rotateZ(750deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(26) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(780deg);

transform: rotateZ(780deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(27) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(810deg);

transform: rotateZ(810deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(28) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(840deg);

transform: rotateZ(840deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(29) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(870deg);

transform: rotateZ(870deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(30) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(900deg);

transform: rotateZ(900deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(31) {

-webkit-transform-origin: center -25vh;

-ms-transform-origin: center -25vh;

transform-origin: center -25vh;

top: 27.5vh;

-webkit-transform: rotateZ(930deg);

transform: rotateZ(930deg);

color: rgba(0, 64, 255, 0.8);

}

body .cs:nth-of-type(32) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(768deg);

transform: rotateZ(768deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(33) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(792deg);

transform: rotateZ(792deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(34) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(816deg);

transform: rotateZ(816deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(35) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(840deg);

transform: rotateZ(840deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(36) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(864deg);

transform: rotateZ(864deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(37) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(888deg);

transform: rotateZ(888deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(38) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(912deg);

transform: rotateZ(912deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(39) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(936deg);

transform: rotateZ(936deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(40) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(960deg);

transform: rotateZ(960deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(41) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(984deg);

transform: rotateZ(984deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(42) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(1008deg);

transform: rotateZ(1008deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(43) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(1032deg);

transform: rotateZ(1032deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(44) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(1056deg);

transform: rotateZ(1056deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(45) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(1080deg);

transform: rotateZ(1080deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(46) {

-webkit-transform-origin: center -30vh;

-ms-transform-origin: center -30vh;

transform-origin: center -30vh;

top: 32.5vh;

-webkit-transform: rotateZ(1104deg);

transform: rotateZ(1104deg);

color: rgba(127, 0, 255, 0.8);

}

body .cs:nth-of-type(47) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(940deg);

transform: rotateZ(940deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(48) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(960deg);

transform: rotateZ(960deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(49) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(980deg);

transform: rotateZ(980deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(50) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1000deg);

transform: rotateZ(1000deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(51) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1020deg);

transform: rotateZ(1020deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(52) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1040deg);

transform: rotateZ(1040deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(53) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1060deg);

transform: rotateZ(1060deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(54) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1080deg);

transform: rotateZ(1080deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(55) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1100deg);

transform: rotateZ(1100deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(56) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1120deg);

transform: rotateZ(1120deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(57) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1140deg);

transform: rotateZ(1140deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(58) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1160deg);

transform: rotateZ(1160deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(59) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1180deg);

transform: rotateZ(1180deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(60) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1200deg);

transform: rotateZ(1200deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(61) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1220deg);

transform: rotateZ(1220deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(62) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1240deg);

transform: rotateZ(1240deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(63) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1260deg);

transform: rotateZ(1260deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(64) {

-webkit-transform-origin: center -35vh;

-ms-transform-origin: center -35vh;

transform-origin: center -35vh;

top: 37.5vh;

-webkit-transform: rotateZ(1280deg);

transform: rotateZ(1280deg);

color: rgba(255, 0, 191, 0.8);

}

body .cs:nth-of-type(65) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1114.28571deg);

transform: rotateZ(1114.28571deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(66) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1131.42857deg);

transform: rotateZ(1131.42857deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(67) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1148.57143deg);

transform: rotateZ(1148.57143deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(68) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1165.71429deg);

transform: rotateZ(1165.71429deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(69) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1182.85714deg);

transform: rotateZ(1182.85714deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(70) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1200deg);

transform: rotateZ(1200deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(71) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1217.14286deg);

transform: rotateZ(1217.14286deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(72) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1234.28571deg);

transform: rotateZ(1234.28571deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(73) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1251.42857deg);

transform: rotateZ(1251.42857deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(74) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1268.57143deg);

transform: rotateZ(1268.57143deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(75) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1285.71429deg);

transform: rotateZ(1285.71429deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(76) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1302.85714deg);

transform: rotateZ(1302.85714deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(77) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1320deg);

transform: rotateZ(1320deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(78) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1337.14286deg);

transform: rotateZ(1337.14286deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(79) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1354.28571deg);

transform: rotateZ(1354.28571deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(80) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1371.42857deg);

transform: rotateZ(1371.42857deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(81) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1388.57143deg);

transform: rotateZ(1388.57143deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(82) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1405.71429deg);

transform: rotateZ(1405.71429deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(83) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1422.85714deg);

transform: rotateZ(1422.85714deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(84) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1440deg);

transform: rotateZ(1440deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(85) {

-webkit-transform-origin: center -40vh;

-ms-transform-origin: center -40vh;

transform-origin: center -40vh;

top: 42.5vh;

-webkit-transform: rotateZ(1457.14286deg);

transform: rotateZ(1457.14286deg);

color: rgba(255, 0, 0, 0.8);

}

body .cs:nth-of-type(86) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1290deg);

transform: rotateZ(1290deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(87) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1305deg);

transform: rotateZ(1305deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(88) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1320deg);

transform: rotateZ(1320deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(89) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1335deg);

transform: rotateZ(1335deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(90) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1350deg);

transform: rotateZ(1350deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(91) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1365deg);

transform: rotateZ(1365deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(92) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1380deg);

transform: rotateZ(1380deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(93) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1395deg);

transform: rotateZ(1395deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(94) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1410deg);

transform: rotateZ(1410deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(95) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1425deg);

transform: rotateZ(1425deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(96) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1440deg);

transform: rotateZ(1440deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(97) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1455deg);

transform: rotateZ(1455deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(98) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1470deg);

transform: rotateZ(1470deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(99) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1485deg);

transform: rotateZ(1485deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(100) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1500deg);

transform: rotateZ(1500deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(101) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1515deg);

transform: rotateZ(1515deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(102) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1530deg);

transform: rotateZ(1530deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(103) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1545deg);

transform: rotateZ(1545deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(104) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1560deg);

transform: rotateZ(1560deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(105) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1575deg);

transform: rotateZ(1575deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(106) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1590deg);

transform: rotateZ(1590deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(107) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1605deg);

transform: rotateZ(1605deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(108) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1620deg);

transform: rotateZ(1620deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:nth-of-type(109) {

-webkit-transform-origin: center -45vh;

-ms-transform-origin: center -45vh;

transform-origin: center -45vh;

top: 47.5vh;

-webkit-transform: rotateZ(1635deg);

transform: rotateZ(1635deg);

color: rgba(255, 191, 0, 0.8);

}

body .cs:first-of-type {

-webkit-transform-origin: none;

-ms-transform-origin: none;

transform-origin: none;

top: 0;

visibility: hidden;

}

@-webkit-keyframes unreel {

100% {

-webkit-transform: rotateZ(3240deg);

transform: rotateZ(3240deg);

border: 3px solid;

}

}

@keyframes unreel {

100% {

-webkit-transform: rotateZ(3240deg);

transform: rotateZ(3240deg);

border: 3px solid;

}

}