能否实现从单一颜色的文本平滑过渡到动态渐变色？

huangapple
go评论102阅读模式
英文:

Is it possible to implement a smooth transition from text painted in one color to an animated gradient?

问题

页面上有白色文本，下方有一个按钮。此外，文本上应用了动态渐变效果。单击按钮时，-webkit-text-fill-color属性变为transparent，导致文本颜色突然变为与渐变相匹配的颜色。

这是它的外观：https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ

是否可能实现从白色到渐变的平滑过渡？
（-webkit-text-fill-color属性不直接支持transition）

英文:

On the page, there is white-colored text with a button positioned below it. Additionally, an animated gradient is applied to fill the text. When the button is clicked, the -webkit-text-fill-color property becomes transparent, resulting in an abrupt change of the text color to match the gradient.

Here's what it looks like: <https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ>

Is it possible to achieve a smooth transition from white to the gradient?
(the -webkit-text-fill-color property does not support transition directly)

答案1

得分: 0

CSS的颜色属性是可过渡的，所以请使用它。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>在js中实现平滑的颜色变化</title>
  8.   <link rel="stylesheet" href="css/styles.css" />
  9.   <style>
  10.     @font-face {
  11.       font-family: Alice;
  12.       src: local(Alice), url(../fonts/Alice-Regular.ttf);
  13.     }
  14.     
  15.     html {
  16.       height: 100%;
  17.     }
  18.     
  19.     body {
  20.       text-align: center;
  21.       justify-content: center;
  22.       align-items: center;
  23.       background-color: #201e1e;
  24.     }
  25.     
  26.     h1 {
  27.       font-family: Alice;
  28.       font-size: 7vw;
  29.       background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  30.       -webkit-background-clip: text;
  31.       background-clip: text;
  32.       color: white;
  33.       transition: color 5s linear;
  34.       background-size: 500% 500%;
  35.       animation: textShine 5s ease-in-out infinite alternate;
  36.     }
  37.     
  38.     button {
  39.       font-family: Alice;
  40.       font-size: 20px;
  41.       padding: 10px 20px;
  42.       background-color: #201e1e;
  43.       color: white;
  44.       border: 2px solid white;
  45.       cursor: pointer;
  46.       transition: background-color 0.3s ease;
  47.     }
  48.     
  49.     button:hover {
  50.       background: linear-gradient(45deg, #38292c, #362d31, #363c3d, #2f3026);
  51.     }
  52.     
  53.     @keyframes textShine {
  54.       0% {
  55.         background-position: 0% 50%;
  56.       }
  57.       100% {
  58.         background-position: 100% 50%;
  59.       }
  60.     }
  61.   </style>
  62. </head>
  64. <body>
  65.   <h1 id="my-text" class="show">Hello word</h1>
  66.   <button id="button" onclick="changeColor()">变色</button>
  67.   <script src="script.js"></script>
  68. </body>
  69. <script>
  70.   let col;
  72.   function changeColor() {
  73.     const myText = document.getElementById("my-text");
  74.     const computedStyle = window.getComputedStyle(myText);
  75.     const textColor = computedStyle.getPropertyValue("color");
  77.     if (textColor === "rgb(255, 255, 255)") {
  78.       col = "transparent";
  79.       document.getElementById("button").innerHTML = "不变色";
  80.     } else {
  81.       col = "white";
  82.       document.getElementById("button").innerHTML = "变色";
  83.     }
  85.     myText.style.color = col;
  86.   }
  87. </script>
  89. <!-- end snippet -->

代码片段将过渡时间设置为5秒，仅用于演示，您可以根据需要将其更改。

英文:

The CSS color property is transitionable so use that instead.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;head&gt;
  2. &lt;meta charset=&quot;UTF-8&quot; /&gt;
  3. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  4. &lt;title&gt;Smooth color change in js&lt;/title&gt;
  5. &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot; /&gt;
  6. &lt;style&gt;
  7. @font-face {
  8. font-family: Alice;
  9. src: local(Alice), url(../fonts/Alice-Regular.ttf);
  10. }
  11. html {
  12. height: 100%;
  13. }
  14. body {
  15. text-align: center;
  16. justify-content: center;
  17. align-items: center;
  18. background-color: #201e1e;
  19. }
  20. h1 {
  21. font-family: Alice;
  22. font-size: 7vw;
  23. background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  24. -webkit-background-clip: text;
  25. background-clip: text;
  26. color: white;
  27. transition: color 5s linear;
  28. background-size: 500% 500%;
  29. animation: textShine 5s ease-in-out infinite alternate;
  30. }
  31. button {
  32. font-family: Alice;
  33. font-size: 20px;
  34. padding: 10px 20px;
  35. background-color: #201e1e;
  36. color: white;
  37. border: 2px solid white;
  38. cursor: pointer;
  39. transition: background-color 0.3s ease;
  40. }
  41. button:hover {
  42. background: linear-gradient(45deg, #38292c, #362d31, #363c3d, #2f3026);
  43. }
  44. @keyframes textShine {
  45. 0% {
  46. background-position: 0% 50%;
  47. }
  48. 100% {
  49. background-position: 100% 50%;
  50. }
  51. }
  52. &lt;/style&gt;
  53. &lt;/head&gt;
  54. &lt;body&gt;
  55. &lt;h1 id=&quot;my-text&quot; class=&quot;show&quot;&gt;Hello word&lt;/h1&gt;
  56. &lt;button id=&quot;button&quot; onclick=&quot;changeColor()&quot;&gt;Переливайся&lt;/button&gt;
  57. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  58. &lt;/body&gt;
  59. &lt;script&gt;
  60. let col;
  61. function changeColor() {
  62. const myText = document.getElementById(&quot;my-text&quot;);
  63. const computedStyle = window.getComputedStyle(myText);
  64. const textColor = computedStyle.getPropertyValue(&quot;color&quot;);
  65. if (textColor === &quot;rgb(255, 255, 255)&quot;) {
  66. col = &quot;transparent&quot;;
  67. document.getElementById(&quot;button&quot;).innerHTML = &quot;Не переливайся&quot;;
  68. } else {
  69. col = &quot;white&quot;;
  70. document.getElementById(&quot;button&quot;).innerHTML = &quot;Переливайся&quot;;
  71. }
  72. myText.style.color = col;
  73. }
  74. &lt;/script&gt;

<!-- end snippet -->

The snippet uses 5s as the transition time just for the demo but of course set that to whatever you require.

huangapple
  • 本文由 发表于 2023年7月10日 21:51:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76654433.html
  • css
  • function
  • html
  • javascript
  • webkit
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定