css - 使用 CSS 对 HTML5 中的图标产生脉动效果

Question

我有一个元素

<a class="fa fa-user icon" href="#"></a>

我的要求是当鼠标在上面时产生脉冲效果。

我的 CSS 是这样的。

.icon:hover{
    -webkit-animation: pulse 2s ease-in;
    -moz-animation: pulse 2s ease-in;
     animation: pulse 2s ease-in;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(1.35);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(1.7);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(2.05);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(2.4);
    opacity: 0.0;
 }
}

效果很好，但问题是原始图标消失了。我希望原始图标在脉动效果发生时保持可见，以使其在用户将鼠标放在其上时脱颖而出。

我需要用新图标覆盖原来的 div 吗？

JSFiddle 可用:https://jsfiddle.net/3bu8fxnp/9/

Answer 1

Updated Fiddle

您可以在 after 伪元素中添加第二个图标。

.fa-user:after {
    content: "\f007";
    display: block;
}

.fa-user:before {
    position: absolute;
}

您还需要使用过渡更改选择器以仅影响其中一个伪元素。

.icon:hover:before {
    ...
}