Question

我正在尝试选择不同的伪类以更改其颜色，我具有以下代码笔

这是我的要素：

<figure class="atom">
  <div class="electron"></div>
  <div class="electron"></div>
  <div class="electron"></div>
  <div class="electron"></div>
  <div class="electron"></div>
</figure>

CSS

body{
    background:#c3c2c2;
}
.atom-container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.electron{
    border-radius:50%;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    border:7px solid #D35353;
}
.electron:nth-child(2){
    transform:rotate(72deg);
    border:7px solid #D9DD92;
}

.electron:nth-child(3){
    transform:rotate(-72deg);
    border:7px solid #EFBDEB;
}

.electron:nth-child(4){
    transform:rotate(-144deg);
    border:7px solid #FF9A6A;
}
.electron:nth-child(5){
    transform:rotate(144deg);
    border:7px solid #93B7E6;
}
.electron:after{
    content:"";
    position:absolute;
    border-radius:50%;
    width:2px;
    height:2px;
    border:4px solid #EFBDEB;
    background:#EFBDEB;
    animation:rotate 1.90s linear infinite;
}

::selection{background:#000;color:#bbb;}
figure{
    width:75px;
    height:255px;
    position:fixed;
    top: 20%;
    left: 40%;
    transform:scale(1.2,1.2)
}

@keyframes rotate{
    0%{bottom:-15px;left:20px;}
    18%{bottom:60px;left:-15px;}
    50%{bottom:210px;left:-5px;}
    60%{bottom:245px;left:25px;}
    70%{bottom:195px;left:55px;}
    76%{bottom:150px;left:65px;}
    90%{bottom:50px;left:55px;}
    97%{bottom:-5px;left:40px;}
    99%{bottom:-10px;left:25px;}
    100%{bottom:-15px;left:20px;}
}

此问题已在我已经工作的Codepen中解决： https://codepen.io/marcos-collado-segura/pen/wLPzPW

一切都在那里，但我无法给电子着色

我已经尝试过：此“ afters”的nth-child（）

我必须使用纯CSS来实现，我不使用预编译器

Answer 1

解决了这个问题

/blog/

（例如）

伪类之后，有没有一种方法可以单独进行动画处理？

1 个答案: