Pure css: Colorate divs behind a particular div

Question

Can someone give me an idea how to colorate the circles behind the airplaine??

Please check this jsfiddle link below

Code:

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

Link: https://jsfiddle.net/b3r51n6z/4/

I want to colorate every circle passed by the plane icone to orange

score 1 · Accepted Answer · edited May 23 '17 at 12:18

Here is one way, where I made a change to your markup and then used one pseudo element to create the circles and the other to do the coloration.

The circle is created using a border radius and a box shadow to get a transparent circle (cut-out) and then one stretch the orange colored pseudo behind.

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

If you are able to use radial gradient, you could do like this

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

Pure css: Colorate divs behind a particular div

1 Answers1