- Bahagian hadapan
- HTML| CSS| JavaScript| Vue.js
Syor Terkini
-
Php8, saya datang juga
84669 orang belajar
- asas asli
- HTML| CSS| HTML5| CSS3| JavaScript
Syor Terkini
-
Ketahui reka letak tapak web dalam masa 30 minit
152542 orang belajar
- Pengenalan kepada Asas
- MySQL| SQL Server
Syor Terkini
-
Tutorial Video Permulaan Shangguan Oracle kepada Mahir
20005 orang belajar
Syor Terkini
-
Baris pertama kod UNI-APP anda
5487 orang belajar
-
Berkibar dari awal ke pelancaran apl
7821 orang belajar
Syor Terkini
-
-
Tutorial Video PS Kemahiran Asas Sifar
180660 orang belajar
-
Tutorial video UI 16 hari untuk anda bermula
48569 orang belajar
-
Tutorial Video Teknik PS dan Teknik Menghiris
18603 orang belajar
- Klasifikasi Perpustakaan Kelas
- HTTP| TCP/IP| pengaturcaraan asas
Syor Terkini
-
Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek
40936 orang belajar
-
-
Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP
1183 orang belajar
-
Tutorial Video Websocket
32909 orang belajar
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sifat warna CSS boleh ditukar, jadi gunakannya.
<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>