HTML5中使用CSS实现图标的脉动效果

Question

HTML5中使用CSS实现图标的脉动效果

4

我有一个元素。

<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/

- progrAmmar

1

这是你想要的吗？Fiddle。 - Mohammad Usman

不，我希望图标始终可见，并且另外有一个脉动的图层围绕它。 - progrAmmar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kilian Stinson · Accepted Answer

更新的Fiddle代码

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

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

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

您需要同时更改具有过渡效果的选择器，以仅影响伪元素之一。

.icon:hover:before {
    ...
}