html修改安扭成渐变色,HTML5/CSS3旋转的彩虹渐变色树叶

CSS

语言：

CSSSCSS

确定

html,

body {

background-color: #222;

margin: 0;

}

.parent {

position: absolute;

left: calc((100vw - 90vmin) / 2);

top: calc((100vh - 90vmin) / 2);

width: 90vmin;

height: 90vmin;

-webkit-animation-name: huerot;

animation-name: huerot;

-webkit-animation-duration: 8s;

animation-duration: 8s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

}

.square {

width: 7vmin;

height: 7vmin;

position: absolute;

-webkit-animation-name: spin;

animation-name: spin;

-webkit-animation-duration: 8s;

animation-duration: 8s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

}

.square:nth-child(1) {

-webkit-animation-delay: 30ms;

animation-delay: 30ms;

background-color: red;

border-radius: 0 50% 0 50%;

left: 0vmin;

top: 0vmin;

}

.square:nth-child(2) {

-webkit-animation-delay: 60ms;

animation-delay: 60ms;

background-color: #ff0d00;

border-radius: 50% 0 50% 0;

left: 0vmin;

top: 9vmin;

}

.square:nth-child(3) {

-webkit-animation-delay: 90ms;

animation-delay: 90ms;

background-color: #ff1a00;

border-radius: 0 50% 0 50%;

left: 0vmin;

top: 18vmin;

}

.square:nth-child(4) {

-webkit-animation-delay: 120ms;

animation-delay: 120ms;

background-color: #ff2600;

border-radius: 50% 0 50% 0;

left: 0vmin;

top: 27vmin;

}

.square:nth-child(5) {

-webkit-animation-delay: 150ms;

animation-delay: 150ms;

background-color: #ff3300;

border-radius: 0 50% 0 50%;

left: 0vmin;

top: 36vmin;

}

.square:nth-child(6) {

-webkit-animation-delay: 180ms;

animation-delay: 180ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 0vmin;

top: 45vmin;

}

.square:nth-child(7) {

-webkit-animation-delay: 210ms;

animation-delay: 210ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 0vmin;

top: 54vmin;

}

.square:nth-child(8) {

-webkit-animation-delay: 240ms;

animation-delay: 240ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 0vmin;

top: 63vmin;

}

.square:nth-child(9) {

-webkit-animation-delay: 270ms;

animation-delay: 270ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 0vmin;

top: 72vmin;

}

.square:nth-child(10) {

-webkit-animation-delay: 300ms;

animation-delay: 300ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 0vmin;

top: 81vmin;

}

.square:nth-child(11) {

-webkit-animation-delay: 330ms;

animation-delay: 330ms;

background-color: #ff0d00;

border-radius: 50% 0 50% 0;

left: 9vmin;

top: 0vmin;

}

.square:nth-child(12) {

-webkit-animation-delay: 360ms;

animation-delay: 360ms;

background-color: #ff1a00;

border-radius: 0 50% 0 50%;

left: 9vmin;

top: 9vmin;

}

.square:nth-child(13) {

-webkit-animation-delay: 390ms;

animation-delay: 390ms;

background-color: #ff2600;

border-radius: 50% 0 50% 0;

left: 9vmin;

top: 18vmin;

}

.square:nth-child(14) {

-webkit-animation-delay: 420ms;

animation-delay: 420ms;

background-color: #ff3300;

border-radius: 0 50% 0 50%;

left: 9vmin;

top: 27vmin;

}

.square:nth-child(15) {

-webkit-animation-delay: 450ms;

animation-delay: 450ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 9vmin;

top: 36vmin;

}

.square:nth-child(16) {

-webkit-animation-delay: 480ms;

animation-delay: 480ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 9vmin;

top: 45vmin;

}

.square:nth-child(17) {

-webkit-animation-delay: 510ms;

animation-delay: 510ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 9vmin;

top: 54vmin;

}

.square:nth-child(18) {

-webkit-animation-delay: 540ms;

animation-delay: 540ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 9vmin;

top: 63vmin;

}

.square:nth-child(19) {

-webkit-animation-delay: 570ms;

animation-delay: 570ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 9vmin;

top: 72vmin;

}

.square:nth-child(20) {

-webkit-animation-delay: 600ms;

animation-delay: 600ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 9vmin;

top: 81vmin;

}

.square:nth-child(21) {

-webkit-animation-delay: 630ms;

animation-delay: 630ms;

background-color: #ff1a00;

border-radius: 0 50% 0 50%;

left: 18vmin;

top: 0vmin;

}

.square:nth-child(22) {

-webkit-animation-delay: 660ms;

animation-delay: 660ms;

background-color: #ff2600;

border-radius: 50% 0 50% 0;

left: 18vmin;

top: 9vmin;

}

.square:nth-child(23) {

-webkit-animation-delay: 690ms;

animation-delay: 690ms;

background-color: #ff3300;

border-radius: 0 50% 0 50%;

left: 18vmin;

top: 18vmin;

}

.square:nth-child(24) {

-webkit-animation-delay: 720ms;

animation-delay: 720ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 18vmin;

top: 27vmin;

}

.square:nth-child(25) {

-webkit-animation-delay: 750ms;

animation-delay: 750ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 18vmin;

top: 36vmin;

}

.square:nth-child(26) {

-webkit-animation-delay: 780ms;

animation-delay: 780ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 18vmin;

top: 45vmin;

}

.square:nth-child(27) {

-webkit-animation-delay: 810ms;

animation-delay: 810ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 18vmin;

top: 54vmin;

}

.square:nth-child(28) {

-webkit-animation-delay: 840ms;

animation-delay: 840ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 18vmin;

top: 63vmin;

}

.square:nth-child(29) {

-webkit-animation-delay: 870ms;

animation-delay: 870ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 18vmin;

top: 72vmin;

}

.square:nth-child(30) {

-webkit-animation-delay: 900ms;

animation-delay: 900ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 18vmin;

top: 81vmin;

}

.square:nth-child(31) {

-webkit-animation-delay: 930ms;

animation-delay: 930ms;

background-color: #ff2600;

border-radius: 50% 0 50% 0;

left: 27vmin;

top: 0vmin;

}

.square:nth-child(32) {

-webkit-animation-delay: 960ms;

animation-delay: 960ms;

background-color: #ff3300;

border-radius: 0 50% 0 50%;

left: 27vmin;

top: 9vmin;

}

.square:nth-child(33) {

-webkit-animation-delay: 990ms;

animation-delay: 990ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 27vmin;

top: 18vmin;

}

.square:nth-child(34) {

-webkit-animation-delay: 1020ms;

animation-delay: 1020ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 27vmin;

top: 27vmin;

}

.square:nth-child(35) {

-webkit-animation-delay: 1050ms;

animation-delay: 1050ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 27vmin;

top: 36vmin;

}

.square:nth-child(36) {

-webkit-animation-delay: 1080ms;

animation-delay: 1080ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 27vmin;

top: 45vmin;

}

.square:nth-child(37) {

-webkit-animation-delay: 1110ms;

animation-delay: 1110ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 27vmin;

top: 54vmin;

}

.square:nth-child(38) {

-webkit-animation-delay: 1140ms;

animation-delay: 1140ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 27vmin;

top: 63vmin;

}

.square:nth-child(39) {

-webkit-animation-delay: 1170ms;

animation-delay: 1170ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 27vmin;

top: 72vmin;

}

.square:nth-child(40) {

-webkit-animation-delay: 1200ms;

animation-delay: 1200ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 27vmin;

top: 81vmin;

}

.square:nth-child(41) {

-webkit-animation-delay: 1230ms;

animation-delay: 1230ms;

background-color: #ff3300;

border-radius: 0 50% 0 50%;

left: 36vmin;

top: 0vmin;

}

.square:nth-child(42) {

-webkit-animation-delay: 1260ms;

animation-delay: 1260ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 36vmin;

top: 9vmin;

}

.square:nth-child(43) {

-webkit-animation-delay: 1290ms;

animation-delay: 1290ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 36vmin;

top: 18vmin;

}

.square:nth-child(44) {

-webkit-animation-delay: 1320ms;

animation-delay: 1320ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 36vmin;

top: 27vmin;

}

.square:nth-child(45) {

-webkit-animation-delay: 1350ms;

animation-delay: 1350ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 36vmin;

top: 36vmin;

}

.square:nth-child(46) {

-webkit-animation-delay: 1380ms;

animation-delay: 1380ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 36vmin;

top: 45vmin;

}

.square:nth-child(47) {

-webkit-animation-delay: 1410ms;

animation-delay: 1410ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 36vmin;

top: 54vmin;

}

.square:nth-child(48) {

-webkit-animation-delay: 1440ms;

animation-delay: 1440ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 36vmin;

top: 63vmin;

}

.square:nth-child(49) {

-webkit-animation-delay: 1470ms;

animation-delay: 1470ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 36vmin;

top: 72vmin;

}

.square:nth-child(50) {

-webkit-animation-delay: 1500ms;

animation-delay: 1500ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 36vmin;

top: 81vmin;

}

.square:nth-child(51) {

-webkit-animation-delay: 1530ms;

animation-delay: 1530ms;

background-color: #ff4000;

border-radius: 50% 0 50% 0;

left: 45vmin;

top: 0vmin;

}

.square:nth-child(52) {

-webkit-animation-delay: 1560ms;

animation-delay: 1560ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 45vmin;

top: 9vmin;

}

.square:nth-child(53) {

-webkit-animation-delay: 1590ms;

animation-delay: 1590ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 45vmin;

top: 18vmin;

}

.square:nth-child(54) {

-webkit-animation-delay: 1620ms;

animation-delay: 1620ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 45vmin;

top: 27vmin;

}

.square:nth-child(55) {

-webkit-animation-delay: 1650ms;

animation-delay: 1650ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 45vmin;

top: 36vmin;

}

.square:nth-child(56) {

-webkit-animation-delay: 1680ms;

animation-delay: 1680ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 45vmin;

top: 45vmin;

}

.square:nth-child(57) {

-webkit-animation-delay: 1710ms;

animation-delay: 1710ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 45vmin;

top: 54vmin;

}

.square:nth-child(58) {

-webkit-animation-delay: 1740ms;

animation-delay: 1740ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 45vmin;

top: 63vmin;

}

.square:nth-child(59) {

-webkit-animation-delay: 1770ms;

animation-delay: 1770ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 45vmin;

top: 72vmin;

}

.square:nth-child(60) {

-webkit-animation-delay: 1800ms;

animation-delay: 1800ms;

background-color: #ffb300;

border-radius: 0 50% 0 50%;

left: 45vmin;

top: 81vmin;

}

.square:nth-child(61) {

-webkit-animation-delay: 1830ms;

animation-delay: 1830ms;

background-color: #ff4d00;

border-radius: 0 50% 0 50%;

left: 54vmin;

top: 0vmin;

}

.square:nth-child(62) {

-webkit-animation-delay: 1860ms;

animation-delay: 1860ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 54vmin;

top: 9vmin;

}

.square:nth-child(63) {

-webkit-animation-delay: 1890ms;

animation-delay: 1890ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 54vmin;

top: 18vmin;

}

.square:nth-child(64) {

-webkit-animation-delay: 1920ms;

animation-delay: 1920ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 54vmin;

top: 27vmin;

}

.square:nth-child(65) {

-webkit-animation-delay: 1950ms;

animation-delay: 1950ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 54vmin;

top: 36vmin;

}

.square:nth-child(66) {

-webkit-animation-delay: 1980ms;

animation-delay: 1980ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 54vmin;

top: 45vmin;

}

.square:nth-child(67) {

-webkit-animation-delay: 2010ms;

animation-delay: 2010ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 54vmin;

top: 54vmin;

}

.square:nth-child(68) {

-webkit-animation-delay: 2040ms;

animation-delay: 2040ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 54vmin;

top: 63vmin;

}

.square:nth-child(69) {

-webkit-animation-delay: 2070ms;

animation-delay: 2070ms;

background-color: #ffb300;

border-radius: 0 50% 0 50%;

left: 54vmin;

top: 72vmin;

}

.square:nth-child(70) {

-webkit-animation-delay: 2100ms;

animation-delay: 2100ms;

background-color: #ffbf00;

border-radius: 50% 0 50% 0;

left: 54vmin;

top: 81vmin;

}

.square:nth-child(71) {

-webkit-animation-delay: 2130ms;

animation-delay: 2130ms;

background-color: #ff5900;

border-radius: 50% 0 50% 0;

left: 63vmin;

top: 0vmin;

}

.square:nth-child(72) {

-webkit-animation-delay: 2160ms;

animation-delay: 2160ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 63vmin;

top: 9vmin;

}

.square:nth-child(73) {

-webkit-animation-delay: 2190ms;

animation-delay: 2190ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 63vmin;

top: 18vmin;

}

.square:nth-child(74) {

-webkit-animation-delay: 2220ms;

animation-delay: 2220ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 63vmin;

top: 27vmin;

}

.square:nth-child(75) {

-webkit-animation-delay: 2250ms;

animation-delay: 2250ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 63vmin;

top: 36vmin;

}

.square:nth-child(76) {

-webkit-animation-delay: 2280ms;

animation-delay: 2280ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 63vmin;

top: 45vmin;

}

.square:nth-child(77) {

-webkit-animation-delay: 2310ms;

animation-delay: 2310ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 63vmin;

top: 54vmin;

}

.square:nth-child(78) {

-webkit-animation-delay: 2340ms;

animation-delay: 2340ms;

background-color: #ffb300;

border-radius: 0 50% 0 50%;

left: 63vmin;

top: 63vmin;

}

.square:nth-child(79) {

-webkit-animation-delay: 2370ms;

animation-delay: 2370ms;

background-color: #ffbf00;

border-radius: 50% 0 50% 0;

left: 63vmin;

top: 72vmin;

}

.square:nth-child(80) {

-webkit-animation-delay: 2400ms;

animation-delay: 2400ms;

background-color: #ffcc00;

border-radius: 0 50% 0 50%;

left: 63vmin;

top: 81vmin;

}

.square:nth-child(81) {

-webkit-animation-delay: 2430ms;

animation-delay: 2430ms;

background-color: #ff6600;

border-radius: 0 50% 0 50%;

left: 72vmin;

top: 0vmin;

}

.square:nth-child(82) {

-webkit-animation-delay: 2460ms;

animation-delay: 2460ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 72vmin;

top: 9vmin;

}

.square:nth-child(83) {

-webkit-animation-delay: 2490ms;

animation-delay: 2490ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 72vmin;

top: 18vmin;

}

.square:nth-child(84) {

-webkit-animation-delay: 2520ms;

animation-delay: 2520ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 72vmin;

top: 27vmin;

}

.square:nth-child(85) {

-webkit-animation-delay: 2550ms;

animation-delay: 2550ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 72vmin;

top: 36vmin;

}

.square:nth-child(86) {

-webkit-animation-delay: 2580ms;

animation-delay: 2580ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 72vmin;

top: 45vmin;

}

.square:nth-child(87) {

-webkit-animation-delay: 2610ms;

animation-delay: 2610ms;

background-color: #ffb300;

border-radius: 0 50% 0 50%;

left: 72vmin;

top: 54vmin;

}

.square:nth-child(88) {

-webkit-animation-delay: 2640ms;

animation-delay: 2640ms;

background-color: #ffbf00;

border-radius: 50% 0 50% 0;

left: 72vmin;

top: 63vmin;

}

.square:nth-child(89) {

-webkit-animation-delay: 2670ms;

animation-delay: 2670ms;

background-color: #ffcc00;

border-radius: 0 50% 0 50%;

left: 72vmin;

top: 72vmin;

}

.square:nth-child(90) {

-webkit-animation-delay: 2700ms;

animation-delay: 2700ms;

background-color: #ffd900;

border-radius: 50% 0 50% 0;

left: 72vmin;

top: 81vmin;

}

.square:nth-child(91) {

-webkit-animation-delay: 2730ms;

animation-delay: 2730ms;

background-color: #ff7300;

border-radius: 50% 0 50% 0;

left: 81vmin;

top: 0vmin;

}

.square:nth-child(92) {

-webkit-animation-delay: 2760ms;

animation-delay: 2760ms;

background-color: #ff8000;

border-radius: 0 50% 0 50%;

left: 81vmin;

top: 9vmin;

}

.square:nth-child(93) {

-webkit-animation-delay: 2790ms;

animation-delay: 2790ms;

background-color: darkorange;

border-radius: 50% 0 50% 0;

left: 81vmin;

top: 18vmin;

}

.square:nth-child(94) {

-webkit-animation-delay: 2820ms;

animation-delay: 2820ms;

background-color: #ff9900;

border-radius: 0 50% 0 50%;

left: 81vmin;

top: 27vmin;

}

.square:nth-child(95) {

-webkit-animation-delay: 2850ms;

animation-delay: 2850ms;

background-color: #ffa600;

border-radius: 50% 0 50% 0;

left: 81vmin;

top: 36vmin;

}

.square:nth-child(96) {

-webkit-animation-delay: 2880ms;

animation-delay: 2880ms;

background-color: #ffb300;

border-radius: 0 50% 0 50%;

left: 81vmin;

top: 45vmin;

}

.square:nth-child(97) {

-webkit-animation-delay: 2910ms;

animation-delay: 2910ms;

background-color: #ffbf00;

border-radius: 50% 0 50% 0;

left: 81vmin;

top: 54vmin;

}

.square:nth-child(98) {

-webkit-animation-delay: 2940ms;

animation-delay: 2940ms;

background-color: #ffcc00;

border-radius: 0 50% 0 50%;

left: 81vmin;

top: 63vmin;

}

.square:nth-child(99) {

-webkit-animation-delay: 2970ms;

animation-delay: 2970ms;

background-color: #ffd900;

border-radius: 50% 0 50% 0;

left: 81vmin;

top: 72vmin;

}

.square:nth-child(100) {

-webkit-animation-delay: 3000ms;

animation-delay: 3000ms;

background-color: #ffe600;

border-radius: 0 50% 0 50%;

left: 81vmin;

top: 81vmin;

}

@-webkit-keyframes spin {

85% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

100% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

}

@keyframes spin {

85% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

100% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

}

@-webkit-keyframes huerot {

100% {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}

@keyframes huerot {

100% {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}