CSS
语言：
CSSSCSS
确定
.frame {
margin: 10px;
}
.box {
background-color: red;
width: 25px;
height: 25px;
position: relative;
display: block;
-webkit-animation: border-animate 30s infinite;
animation: border-animate 30s infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
border-width: 33px;
border-style: solid;
float: left;
margin-right: 10px;
margin-bottom: 10px;
border-color: red;
-webkit-transition: background-color 0.33s ease-in-out;
transition: background-color 0.33s ease-in-out;
}
.box:hover {
background-color: DarkCyan;
}
@-webkit-keyframes border-animate {
0% {
border-color: red;
}
16% {
border-color: orange;
}
32% {
border-color: goldenrod;
}
48% {
border-color: CadetBlue;
}
64% {
border-color: DarkCyan;
}
80% {
border-color: blueviolet;
}
95% {
border-color: purple;
}
100% {
border-color: red;
}
}
@keyframes border-animate {
0% {
border-color: red;
}
16% {
border-color: orange;
}
32% {
border-color: goldenrod;
}
48% {
border-color: CadetBlue;
}
64% {
border-color: DarkCyan;
}
80% {
border-color: blueviolet;
}
95% {
border-color: purple;
}
100% {
border-color: red;
}
}
.box:nth-child(0) {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
}
.box:nth-child(1) {
-webkit-animation-delay: 0.1s !important;
animation-delay: 0.1s !important;
}
.box:nth-child(2) {
-webkit-animation-delay: 0.2s !important;
animation-delay: 0.2s !important;
}
.box:nth-child(3) {
-webkit-animation-delay: 0.3s !important;
animation-delay: 0.3s !important;
}
.box:nth-child(4) {
-webkit-animation-delay: 0.4s !important;
animation-delay: 0.4s !important;
}
.box:nth-child(5) {
-webkit-animation-delay: 0.5s !important;
animation-delay: 0.5s !important;
}
.box:nth-child(6) {
-webkit-animation-delay: 0.6s !important;
animation-delay: 0.6s !important;
}
.box:nth-child(7) {
-webkit-animation-delay: 0.7s !important;
animation-delay: 0.7s !important;
}
.box:nth-child(8) {
-webkit-animation-delay: 0.8s !important;
animation-delay: 0.8s !important;
}
.box:nth-child(9) {
-webkit-animation-delay: 0.9s !important;
animation-delay: 0.9s !important;
}
.box:nth-child(10) {
-webkit-animation-delay: 1s !important;
animation-delay: 1s !important;
}
.box:nth-child(11) {
-webkit-animation-delay: 1.1s !important;
animation-delay: 1.1s !important;
}
.box:nth-child(12) {
-webkit-animation-delay: 1.2s !important;
animation-delay: 1.2s !important;
}
.box:nth-child(13) {
-webkit-animation-delay: 1.3s !important;
animation-delay: 1.3s !important;
}
.box:nth-child(14) {
-webkit-animation-delay: 1.4s !important;
animation-delay: 1.4s !important;
}
.box:nth-child(15) {
-webkit-animation-delay: 1.5s !important;
animation-delay: 1.5s !important;
}
.box:nth-child(16) {
-webkit-animation-delay: 1.6s !important;
animation-delay: 1.6s !important;
}
.box:nth-child(17) {
-webkit-animation-delay: 1.7s !important;
animation-delay: 1.7s !important;
}
.box:nth-child(18) {
-webkit-animation-delay: 1.8s !important;
animation-delay: 1.8s !important;
}
.box:nth-child(19) {
-webkit-animation-delay: 1.9s !important;
animation-delay: 1.9s !important;
}
.box:nth-child(20) {
-webkit-animation-delay: 2s !important;
animation-delay: 2s !important;
}
.box:nth-child(21) {
-webkit-animation-delay: 2.1s !important;
animation-delay: 2.1s !important;
}
.box:nth-child(22) {
-webkit-animation-delay: 2.2s !important;
animation-delay: 2.2s !important;
}
.box:nth-child(23) {
-webkit-animation-delay: 2.3s !important;
animation-delay: 2.3s !important;
}
.box:nth-child(24) {
-webkit-animation-delay: 2.4s !important;
animation-delay: 2.4s !important;
}
.box:nth-child(25) {
-webkit-animation-delay: 2.5s !important;
animation-delay: 2.5s !important;
}
.box:nth-child(26) {
-webkit-animation-delay: 2.6s !important;
animation-delay: 2.6s !important;
}
.box:nth-child(27) {
-webkit-animation-delay: 2.7s !important;
animation-delay: 2.7s !important;
}
.box:nth-child(28) {
-webkit-animation-delay: 2.8s !important;
animation-delay: 2.8s !important;
}
.box:nth-child(29) {
-webkit-animation-delay: 2.9s !important;
animation-delay: 2.9s !important;
}
.box:nth-child(30) {
-webkit-animation-delay: 3s !important;
animation-delay: 3s !important;
}
.box:nth-child(31) {
-webkit-animation-delay: 3.1s !important;
animation-delay: 3.1s !important;
}
.box:nth-child(32) {
-webkit-animation-delay: 3.2s !important;
animation-delay: 3.2s !important;
}
.box:nth-child(33) {
-webkit-animation-delay: 3.3s !important;
animation-delay: 3.3s !important;
}
.box:nth-child(34) {
-webkit-animation-delay: 3.4s !important;
animation-delay: 3.4s !important;
}
.box:nth-child(35) {
-webkit-animation-delay: 3.5s !important;
animation-delay: 3.5s !important;
}
.box:nth-child(36) {
-webkit-animation-delay: 3.6s !important;
animation-delay: 3.6s !important;
}
.box:nth-child(37) {
-webkit-animation-delay: 3.7s !important;
animation-delay: 3.7s !important;
}
.box:nth-child(38) {
-webkit-animation-delay: 3.8s !important;
animation-delay: 3.8s !important;
}
.box:nth-child(39) {
-webkit-animation-delay: 3.9s !important;
animation-delay: 3.9s !important;
}
.box:nth-child(40) {
-webkit-animation-delay: 4s !important;
animation-delay: 4s !important;
}
.box:nth-child(41) {
-webkit-animation-delay: 4.1s !important;
animation-delay: 4.1s !important;
}
.box:nth-child(42) {
-webkit-animation-delay: 4.2s !important;
animation-delay: 4.2s !important;
}
.box:nth-child(43) {
-webkit-animation-delay: 4.3s !important;
animation-delay: 4.3s !important;
}
.box:nth-child(44) {
-webkit-animation-delay: 4.4s !important;
animation-delay: 4.4s !important;
}
.box:nth-child(45) {
-webkit-animation-delay: 4.5s !important;
animation-delay: 4.5s !important;
}
.box:nth-child(46) {
-webkit-animation-delay: 4.6s !important;
animation-delay: 4.6s !important;
}
.box:nth-child(47) {
-webkit-animation-delay: 4.7s !important;
animation-delay: 4.7s !important;
}
.box:nth-child(48) {
-webkit-animation-delay: 4.8s !important;
animation-delay: 4.8s !important;
}
.box:nth-child(49) {
-webkit-animation-delay: 4.9s !important;
animation-delay: 4.9s !important;
}
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
