CSS 中的脉动社交媒体按钮答案

【问题标题】：Pulsating Social Media Buttons in CSSCSS 中的脉动社交媒体按钮
【发布时间】：2016-12-28 09:39:15
【问题描述】：

所以我使用 CSS 创建了这些脉动的社交媒体按钮。跳动几下后，您可以看到 Instagram 图标右侧有一条小红线。关于导致此问题的原因以及如何删除它的任何想法？

片段：

@keyframes pulser {
  from {
    color: rgba(0, 0, 0, 0.2);
  }
  to {
    color: rgba(255, 255, 255, 1);
  }
}
#footer a {
        color: #999;
        color: rgba(185, 186, 187, 0.5);
        animation-name: pulser;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
}

/* Stopping the pulsation on hover for that particular child */
a:hover {
  color: #bbb;
  color: #b9babb;
  animation-name: pulser;
  animation-duration: 2s;
  animation-iteration-count: 0;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

另外，请随意使用此代码并对其进行改进:)

截图：http://puu.sh/qJBkj/d3701d834e.png

【问题讨论】：

没有看到这个错误。火狐48
在 Chrome 中也没有真正看到它......但您可能希望将 outline: none; 添加到锚 css。它与text-decoration 结合使用，消除了悬停事件的默认浏览器样式。一些浏览器的轮廓以及装饰。顺便说一句，脉搏不错。
在 u css 中哪里使用了红色？
@AndreyFedorov 我没有这很奇怪。
@Scott 你得仔细看看。我正在使用最新的 chrome 版本。这是截图：puu.sh/qJBkj/d3701d834e.png

标签： css css-transitions

【解决方案1】：

删除下面空的 CSS 并导致该行

            #footer .actions li a:before {

            }

https://jsfiddle.net/Nagasai_Aytha/pm9hkyy8/4/

【讨论】：

是的@Joel，在删除之后......它没有出现，因为没有什么错误或额外的 CSS 导致了这种情况