css实现随机颜色,CSS3 一个显示随机颜色的动画

CSS

语言：

CSSSCSS

确定

html,

body {

background: -webkit-linear-gradient(top, #fff, #dcf);

background: linear-gradient(to bottom, #fff, #dcf);

height: 100%;

}

.container {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

.box {

background: #fff;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

margin: .1em;

height: 2em;

width: 2em;

display: inline-block;

position: relative;

padding: 0;

}

.box:after {

content: "";

background: #f00;

height: 100%;

width: 100%;

box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);

position: absolute;

top: 0;

left: 0;

opacity: 0;

}

.box:nth-of-type(1):after {

-webkit-animation: 3s 0s block-animation linear infinite;

animation: 3s 0s block-animation linear infinite;

}

@-webkit-keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #954ade;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #954ade;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(2):after {

-webkit-animation: 3s 0.1s block-animation linear infinite;

animation: 3s 0.1s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #3175b0;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(3):after {

-webkit-animation: 3s 0.2s block-animation linear infinite;

animation: 3s 0.2s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #e3b9e0;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(4):after {

-webkit-animation: 3s 0.3s block-animation linear infinite;

animation: 3s 0.3s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #be1290;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(5):after {

-webkit-animation: 3s 0.4s block-animation linear infinite;

animation: 3s 0.4s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #cb4dce;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(10):after {

-webkit-animation: 3s 0.5s block-animation linear infinite;

animation: 3s 0.5s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #ee44c9;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(15):after {

-webkit-animation: 3s 0.6s block-animation linear infinite;

animation: 3s 0.6s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #a1a89e;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(20):after {

-webkit-animation: 3s 0.7s block-animation linear infinite;

animation: 3s 0.7s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #869ca3;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(25):after {

-webkit-animation: 3s 0.8s block-animation linear infinite;

animation: 3s 0.8s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #74af40;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(24):after {

-webkit-animation: 3s 0.9s block-animation linear infinite;

animation: 3s 0.9s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #6cb3e4;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(23):after {

-webkit-animation: 3s 1s block-animation linear infinite;

animation: 3s 1s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #47b6e3;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(22):after {

-webkit-animation: 3s 1.1s block-animation linear infinite;

animation: 3s 1.1s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #26dba9;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(21):after {

-webkit-animation: 3s 1.2s block-animation linear infinite;

animation: 3s 1.2s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #9bd27;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(16):after {

-webkit-animation: 3s 1.3s block-animation linear infinite;

animation: 3s 1.3s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #246be5;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(11):after {

-webkit-animation: 3s 1.4s block-animation linear infinite;

animation: 3s 1.4s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #38a7c3;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(6):after {

-webkit-animation: 3s 1.5s block-animation linear infinite;

animation: 3s 1.5s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #13482f;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(7):after {

-webkit-animation: 3s 1.6s block-animation linear infinite;

animation: 3s 1.6s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #730d6b;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(8):after {

-webkit-animation: 3s 1.7s block-animation linear infinite;

animation: 3s 1.7s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #1a605a;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(9):after {

-webkit-animation: 3s 1.8s block-animation linear infinite;

animation: 3s 1.8s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #42e64a;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(14):after {

-webkit-animation: 3s 1.9s block-animation linear infinite;

animation: 3s 1.9s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #ce1f8a;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(19):after {

-webkit-animation: 3s 2s block-animation linear infinite;

animation: 3s 2s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #ecbc9d;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(18):after {

-webkit-animation: 3s 2.1s block-animation linear infinite;

animation: 3s 2.1s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #b1e9c8;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(17):after {

-webkit-animation: 3s 2.2s block-animation linear infinite;

animation: 3s 2.2s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #138169;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(12):after {

-webkit-animation: 3s 2.3s block-animation linear infinite;

animation: 3s 2.3s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #397f8d;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}

.box:nth-of-type(13):after {

-webkit-animation: 3s 2.4s block-animation linear infinite;

animation: 3s 2.4s block-animation linear infinite;

}

@keyframes block-animation {

0% {

opacity: 0;

}

10% {

opacity: 1;

background: #7ad1f4;

}

20% {

opacity: 0;

}

100% {

opacity: 0;

}

}