英文:
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的颜色属性是可过渡的，所以请使用它。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>在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>
<!-- 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 -->
<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>
<!-- end snippet -->
The snippet uses 5s as the transition time just for the demo but of course set that to whatever you require.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论