suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Ist es möglich, einen fließenden Übergang von einfarbig gezeichnetem Text zu einem animierten Farbverlauf zu erreichen?

Auf der Seite befindet sich weißer Text und darunter eine Schaltfläche. Zusätzlich werden animierte Farbverläufe angewendet, um den Text zu füllen. Wenn Sie auf die Schaltfläche -webkit-text-fill-color 属性将变为透明 klicken, ändert sich die Textfarbe plötzlich und passt sich dem Farbverlauf an.

Wie unten gezeigt: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ

Ist es möglich, einen fließenden Übergang von Weiß zu Farbverlauf zu erreichen? (-webkit-text-fill-color 属性不直接支持transition)

P粉762447363P粉762447363469 Tage vor827

Antworte allen(1)Ich werde antworten

  • P粉465287592

    P粉4652875922023-09-17 00:50:46

    CSS 颜色属性是可转换的，因此请使用它。

    <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Smooth color change in js</title>
  <link rel="stylesheet" href="css/styles.css" />
  <style>
    @font-face {
      font-family: Alice;
      src: local(Alice), url(../fonts/Alice-Regular.ttf);
    }
    
    html {
      height: 100%;
    }
    
    body {
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #201e1e;
    }
    
    h1 {
      font-family: Alice;
      font-size: 7vw;
      background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      -webkit-background-clip: text;
      background-clip: text;
      color: white;
      transition: color 5s linear;
      background-size: 500% 500%;
      animation: textShine 5s ease-in-out infinite alternate;
    }
    
    button {
      font-family: Alice;
      font-size: 20px;
      padding: 10px 20px;
      background-color: #201e1e;
      color: white;
      border: 2px solid white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    button:hover {
      background: linear-gradient(45deg, #38292c, #362d31, #363c3d, #2f3026);
    }
    
    @keyframes textShine {
      0% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }
  </style>

</head>

<body>
  <h1 id="my-text" class="show">Hello word</h1>
  <button id="button" onclick="changeColor()">Переливайся</button>
  <script src="script.js"></script>
</body>
<script>
  let col;

  function changeColor() {
    const myText = document.getElementById("my-text");
    const computedStyle = window.getComputedStyle(myText);
    const textColor = computedStyle.getPropertyValue("color");

    if (textColor === "rgb(255, 255, 255)") {
      col = "transparent";
      document.getElementById("button").innerHTML = "Не переливайся";
    } else {
      col = "white";
      document.getElementById("button").innerHTML = "Переливайся";
    }

    myText.style.color = col;
  }
</script>

    Antwort
    0
  • StornierenAntwort