纯粹的CSS：Colorate divs背后的特定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/

我想将平面icone传递给橙色的每个圆圈着色

Answer 1

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

使用边框半径和box shadow to get a transparent circle (cut-out)创建圆，然后将橙色伪背后拉伸。

＆＃13;

＆＃13;

.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); }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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%; }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;