缺少js动画效果css渐变

Question

我正在试验 CSS 渐变以熟悉它们。这听起来可能很愚蠢，但我尝试在 javascript 中使用 .animate() 应用 'opacity'（只是尝试一下！），并使用 CSS.[= 对文本进行一些线性渐变17=]

但是一旦我决定删除脚本，线性渐变就不再起作用了。

为什么会这样？我该如何解决？

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

Browser support reference

这通常可能是某些功能运行不正常的原因。

也试试这个 text gradient guide。它可能会帮助您实现目标。

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

缺少js动画效果css渐变

Absense of js animation affects css gradient

javascript

css

gradient

background-color