css情景动画,CSS3 白天/黑夜场景轮回动画

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

}

body {

overflow: hidden;

-webkit-animation: dn 10s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation: dn 10s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

div {

position: absolute;

left: calc(50% - 750px);

top: 85%;

width: 1500px;

height: 1500px;

background-color: silver;

opacity: 1;

-webkit-animation: rotate 10s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation: rotate 10s;

animation-iteration-count: infinite;

animation-timing-function: linear;

border: 1px solid white;

border-width: 50px 0px;

border-radius: 200px;

}

div::after,

div::before {

content: " ";

position: absolute;

width: 1500px;

height: 1500px;

background-color: green;

transform: rotate(30deg);

border-radius: 550px;

border: 1px solid #060;

border-width: 0px 50px;

}

div::before {

background-color: #469a3d;

border-color: green;

transform: rotate(60deg);

border-radius: 400px;

}

div div {

left: -150px;

top: -150px;

height: 100px;

width: 100px;

border-radius: 10px;

background-color: yellow;

border: 0;

}

div div::after,

div div::before {

background-color: yellow;

height: 100px;

width: 100px;

border-radius: 10px;

border: 0;

}

@keyframes rotate {

0% {

transform: rotate(1deg);

}

30% {

opacity: 1;

}

45% {

opacity: 0.2;

}

50% {

transform: rotate(180deg);

}

75% {

opacity: 0.2;

}

100% {

transform: rotate(360deg);

}

}

@-webkit-keyframes rotate {

0% {

transform: rotate(1deg);

}

30% {

opacity: 1;

}

45% {

opacity: 0.2;

}

50% {

transform: rotate(180deg);

}

75% {

opacity: 0.2;

}

100% {

transform: rotate(360deg);

}

}

@keyframes dn {

0% {

background-color: #f4d9e7;

}

20% {

background-color: lightblue;

}

40% {

background-color: #300030;

}

43%,

80% {

background-color: black;

}

100% {

background-color: #f4d9e7;

}

}

@-webkit-keyframes dn {

0% {

background-color: #f4d9e7;

}

20% {

background-color: lightblue;

}

40% {

background-color: #300030;

}

43%,

80% {

background-color: black;

}

100% {

background-color: #f4d9e7;

}

}