如何为单个HTML div元素及其伪元素设置独立的hover动画效果

解决方案 #

你遇到的问题本质是伪元素作为父div的子节点，会继承父元素的transform变换，父元素旋转时，伪元素的动画是在父元素的旋转基础上叠加的，所以不需要额外新增HTML元素，只要调整伪元素的动画方向抵消部分父元素的旋转效果即可实现独立转速。

修改后的完整代码 #

div {
    width: 50px;
    height: 50px;
    margin: 50% auto;
    border: solid 5px;
    border-radius: 50%;
    border-color: dodgerblue dodgerblue dodgerblue transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 伪元素动画加reverse反向，抵消部分父元素旋转 */
div:hover::before {
    animation: rotate 2s linear reverse infinite;
}
div:hover::after {
    /* 可自行调整时长实现想要的转速，比如要视觉3s一圈就设1.5s */
    animation: rotate 1.5s linear reverse infinite;
}

div:hover {
    animation: rotate 1s linear infinite;
}

div::before {
    content: "";
    width: 130%;
    height: 130%;
    position: absolute;
    border: 5px solid;
    border-color: goldenrod transparent goldenrod goldenrod;
    border-radius: 50%;
}

div::after {
    content: "";
    width: 160%;
    height: 160%;
    position: absolute;
    border: 5px solid;
    border-color: transparent black black black;
    border-radius: 50%;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

实现原理 #

父div自身1s顺时针转360度，伪元素设置反向旋转后，自身的旋转会抵消一部分父元素的旋转效果：

• 金色伪元素反向2s转360度，叠加父元素的旋转后，视觉上就是2s顺时针转一圈
• 黑色伪元素反向1.5s转360度，叠加父元素的旋转后，视觉上就是3s顺时针转一圈
  完全符合单div、hover触发、蓝色元素1s动画的要求。

内容的提问来源于stack exchange，提问作者xiyini