- 原生基础
- HTML| CSS| HTML5| CSS3| JavaScript
最新推荐
-
30分钟学会网站布局
152542 人学习
最新推荐
-
你的第一行 UNI-APP 代码
5487 人学习
-
Flutter 从头到应用启动
7821 人学习
最新推荐
-
AXURE 9视频教程（适合产品经理交互产品设计UI）
3350 人学习
-
零基础PS视频教程
180660 人学习
-
16天带你入门UI视频教程
48569 人学习
-
PS技巧和切片技巧视频教程
18603 人学习
最新推荐
-
阿里云环境搭建以及项目上线视频教程
40936 人学习
-
计算机网络概述——程序员必须掌握的基础知识
1549 人学习
-
程序员必备教程——HTTP协议讲解
1183 人学习
-
Websocket视频教程
32909 人学习
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>