缺少js动画会影响css渐变效果

Question

我正在尝试使用CSS渐变来熟悉它们。这可能听起来很傻，但我试着用下面的方法来应用 "不透明度"。.animate() (只是尝试一下！)，并使用CSS对文本进行了一些线性梯度。

但只要我决定删除脚本，线性梯度就不再工作了。

为什么会出现这样的情况？我该如何修复它呢？

document.querySelector(".title").animate([
    { opacity: 0 },
    { opacity: 1 }
], { opacity: 0, duration: 500, easing: "ease-in", fill: "forwards" } )

body {
  margin: 0;
  text-align: center;
}

/************************** TITLE SECTION ****************************/
.container {
  padding: 0;
  position: relative;
  margin-top: 0;
}

.title {
  display: inline-block;
  margin: 5% auto auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 90px;
  background: linear-gradient(100deg, #fdbcac 25%, #3167fa 60%, #fdbcac 100%);
  background-clip: text;
  color: transparent;
}

/*************************** BACKGROUNDS & IMAGES ********************************/
.top-background {
  width: 100%;
  height: 650px;
  position: absolute;
  top: -10%;
  left: 0;
  opacity: 0.7;
}

.top-background1 {
  width: 100%;
  height: 650px;
  position: absolute;
  top: -10%;
  left: 0;
  z-index: -1;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <!-- Styles -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet">
</head>

<body>
  <!-- TITLE SECTION -->
  <section class="container-fluid container">
    <img class="top-background" src="images\background.png" />
    <img class="top-background1" src="images\geordanna-cordero-2.jpg" />
    <h1 class="title">
      Sapinder Pal
    </h1>


  </section>



  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
</body>

</html>

Answer 1

你可能要考虑浏览器的引用和前缀，如 -webkit- 或 -moz-.

浏览器支持参考

这通常可能是某些东西不正常的原因。

也可以试试这个文字渐变指南. 它可能会帮助你与你正在teying实现什么。

希望这对你有帮助。你可能不需要担心JS。

缺少js动画会影响css渐变效果

问题描述投票：2回答：1

1个回答

最新问题

缺少js动画会影响css渐变效果

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1