使用CSS

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