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

更新小提琴

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

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

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

您还需要通过转换更改选择器,以仅影响其中一个伪元素.

.icon:hover:before {
    ...
}