css - 我的风格在 Chrome 中完美运行,但在 Firefox 中不完美

标签 css

我为闪烁文本阴影编写了简单的 css。

它在谷歌浏览器中正常工作。

但不适用于 firefox。

我需要在所有类型的浏览器中工作。

谁能帮帮我

#container {
  width: 500px;
  margin: auto;
}
#container {
  width: 500px;
  margin: auto;
}
p {
  text-align: center;
  font-size: 2em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #316885;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #316885;
  -webki t-animation: none;
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
<html>

<head>
  <style>
  </style>
</head>

<body>
  <div id="container">
    <p>
      <a class="changeColor">Daily Mail Dispathch Service-Sri Lanka Army</a>

    </p>
  </div>
</body>

</html>

最佳答案

你还需要定义@keyframes对于火狐。您当前的代码仅针对 webkit 浏览器,因此适用于 Chrome。

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}

输出:

#container {
  width: 500px;
  margin: auto;
}
#container {
  width: 500px;
  margin: auto;
}
p {
  text-align: center;
  font-size: 2em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #316885;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #316885;
  -webkit-animation: none;
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
<div id="container">
  <p>
    <a class="changeColor">Daily Mail Dispathch Service-Sri Lanka Army</a>
  </p>
</div>

关于css - 我的风格在 Chrome 中完美运行,但在 Firefox 中不完美,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32712901/

相关文章:

javascript - 通过 <a> 内的 <div> 突出显示当前菜单项

html - 使用 CSS3/HTML5 旋转文本

html - 如何在不滚动的情况下将布局固定到浏览器窗口

javascript - 为 Firefox 和 IE 定制滚动条设计

html - CSS-Grid 卡住列滚动实现问题

javascript - 将标签放在选择上并在单击时打开选择

css - Rails 应用程序中的粘性导航滚动到最下方

html - 嵌套列表和百分比

css - 如何在 shadow DOM 中定位::part 属性的 child

javascript - 如果另一个元素为空,如何动态隐藏 html 元素