css - 纯CSS : Colorate divs behind a particular div

Question

谁能告诉我如何给飞机后面的圆圈上色？

请检查下面的 jsfiddle 链接

代码:

.main {
  display: flex;
  position:relative;
  border: 1px solid green;
  margin: 100px;
  overflow:hidden;
}
.plane, .item {
  width: 50px;
  height: 50px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.item {
  margin: 0 5px;
}
.plane {
  position:absolute;
  -webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 3s infinite;
}
.fa-circle {
  font-size:10px;
}
.fa-plane {
  transform: rotate(45deg);
  color:red;
}
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 420px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 420px;}
}
@-webkit-keyframes coloration {
    from {color: orange;}
    to {color: green;}
}

@keyframes coloration {
    from {color: orange;}
    to {color: green;}
}

链接:https://jsfiddle.net/b3r51n6z/4/

我想把飞机图标经过的每个圆都涂成橙色

Answer 1

这是一种方法，我更改了您的标记，然后使用一个伪元素创建圆圈，另一个伪元素进行着色。

圆是使用边界半径和 box shadow to get a transparent circle (cut-out) 创建的然后在后面拉伸(stretch)橙色假体。

.main {
  display: flex;
  position:relative;
  border: 1px solid green;
  margin: 100px;
  overflow:hidden;
  background: black;
}
.main::before{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  width: 120%;
  height:100%;
  background: orange;
  transform: scaleX(0);
  transform-origin: left center;
  animation: coloration 3s infinite;
}
.plane, .item {
  position:relative;
  width: 50px;
  height: 50px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.item {
  overflow:hidden;
}
.item::before{
  content:'';
  position:absolute;
  left: 50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:100%;
  box-shadow: 0px -100px 0px 200px #FFF;
  transform: translate(-50%,-50%);
}
.plane {
  position:absolute;
  -webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 3s infinite;
  z-index: 1;
}
.fa-plane {
  transform: rotate(45deg);
  color:red;
}
@-webkit-keyframes mymove {
    from { transform: translateX(0); }
      to { transform: translateX(420px); }
}
@keyframes mymove {
    from { transform: translateX(0); }
      to { transform: translateX(420px); }
}
@-webkit-keyframes coloration {
    from { transform: scaleX(0); }
      to { transform: scaleX(1); }
}
@keyframes coloration {
    from { transform: scaleX(0); }
      to { transform: scaleX(1); }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='main'>
  <div class='plane'>
    <i class="fa fa-3x fa-plane" aria-hidden="true"></i>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
  <div class='item'>
  </div>
</div>

---

如果你可以使用径向渐变，你可以这样做

.main {
  display: flex;
  position:relative;
  border: 1px solid green;
  margin: 100px;
  height: 50px;
  overflow:hidden;
}
.main::before{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  width: 120%;
  height:100%;
  background: radial-gradient(black 15%, transparent 16%) left center;
  background-size:40px 40px;
}
.main::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  width: 0;
  height:100%;
  background: radial-gradient(orange 15%, transparent 16%) left center;
  background-size:40px 40px;
  animation: coloration 3s infinite;
}
.plane {
  width: 50px;
  height: 50px;
  display:flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  -webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 3s infinite;
  z-index: 1;
}
.fa-plane {
  transform: rotate(45deg);
  color:red;
}
@-webkit-keyframes mymove {
    from { transform: translateX(0); }
      to { transform: translateX(420px); }
}
@keyframes mymove {
    from { transform: translateX(0); }
      to { transform: translateX(420px); }
}
@-webkit-keyframes coloration {
    from { width: 0; }
      to { width: 110%; }
}
@keyframes coloration {
    from { width: 0; }
      to { width: 110%; }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='main'>
  <div class='plane'>
    <i class="fa fa-3x fa-plane" aria-hidden="true"></i>
  </div>
</div>