Question

我为眨眼文字阴影写了简单的CSS。

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

但无法在Firefox中使用。

我需要在所有类型的浏览器中使用它。

有人可以帮助我吗

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

您仍然需要为Firefox定义@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>

我的风格在Chrome中完美运行，但在Firefox中则不然

1 个答案: