Question

我一直在处理第一组加载动画。

而不是让旋转器只是切换颜色，我希望他们：

继承前一个div的背景颜色
在旋转时使用较暗的背景颜色
无限重复，将深色背景颜色移动到第一个div，一旦它到达终点。

任何建议都表示赞赏。

.spinner {
  width: 20px;
  height: 20px;
  background-color: #007ACC;
  border: 1px;
  border-radius: 10px;
  margin: 10px;
  float: left;
  -webkit-animation: rotateplane 2s infinite ease-in-out;
  animation: rotateplane 2s  infinite ease-in-out;
}

.spinner:nth-child(1) { -webkit-animation: changecolor 2s infinite ease-in-out; animation: changecolor 2s  infinite ease-in-out; }
.spinner:nth-child(2) { -webkit-animation: changecolor 2s .5s infinite ease-in-out; animation: changecolor 2s .5s infinite ease-in-out; }
.spinner:nth-child(3) { -webkit-animation: changecolor 2s 1s infinite ease-in-out; animation: changecolor 2s 1s infinite ease-in-out; }
.spinner:nth-child(4) { -webkit-animation: changecolor 2s 1.5s infinite ease-in-out; animation: changecolor 2s 1.5s infinite ease-in-out; }

@-webkit-keyframes changecolor {
 0% {-webkit-transform: perspective(100px); }    
50% { background-color: #000; -webkit-transform: perspective(100px) rotateY(180deg)}
100% { -webkit-transform: perspective(100px) rotateY(180deg)  rotateX(180deg) }     
}

Answer 1

与尼古拉斯在评论中所说的相反，你可以使用动画延迟和一些子选择器的组合来获得你想要的东西而无需任何javascript

.example:nth-child(1) { -webkit-animation: changecolor 2s infinite ease-in-out; animation: changecolor 2s  infinite ease-in-out; }
.example:nth-child(2) { -webkit-animation: changecolor 2s .5s infinite ease-in-out; animation: changecolor 2s .5s infinite ease-in-out; }
.example:nth-child(3) { -webkit-animation: changecolor 2s 1s infinite ease-in-out; animation: changecolor 2s 1s infinite ease-in-out; }
.example:nth-child(4) { -webkit-animation: changecolor 2s 1.5s infinite ease-in-out; animation: changecolor 2s 1.5s infinite ease-in-out; }
@-webkit-keyframes changecolor { 50% { background-color: #000; } }

Demo

如果您希望在开始时以不同方式对点进行着色，则可以使用负动画延迟。对于与此类似的更多CSS技巧，您可能对my CSS-Tricks article感兴趣

CSS3加载动画继承自之前的div

1 个答案: