Отсутствие js анимации влияет на css градиент - PullRequest
Новая
       71

Отсутствие js анимации влияет на css градиент

2 голосов
/ 03 мая 2020

Я экспериментировал с CSS градиентами, чтобы познакомиться с ними. Возможно, это звучит глупо, но я попытался применить «непрозрачность», используя .animate() в javascript (просто проверяя!), И некоторый линейный градиент для текста, используя CSS.

First

Но как только я решу удалить скрипт, линейный градиент больше не будет работать.

Second

Почему так себя ведет? Как я могу это исправить? 

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>

1 Ответ

1 голос
/ 03 мая 2020

Возможно, вы захотите рассмотреть ссылки и префиксы браузера, такие как -webkit- или -moz-.

Ссылка на поддержку браузера

Обычно это может быть причиной того, что что-то не работает правильно.

Также попробуйте это текстовое руководство по градиенту . Это может помочь вам достичь того, чего вы хотите достичь.

Надеюсь, это поможет. Вам не нужно беспокоиться о JS.

...