Rumah > Soal Jawab > teks badan
P粉6424362822023-09-04 00:25:02
Untuk menjawab bahagian soalan anda tentang mengekalkan warna kelas aktif tetap pada tuding, apa yang saya lakukan ialah mencipta satu lagi @keyframe
,使得在 0%
和 100%
时它们都保持灰色。然后我使用 transition: 0.5s;
untuk melancarkan peralihan animasi perubahan warna.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap'); html body { background: #0E1212; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: none; font-family: 'Roboto Mono', monospace; } li { float: left; } li a { display: block; color: #DBDBDB; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { color: #682AE9; transition: 0.5s; animation-name: example; animation-duration: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .active { color: #808080; } .active:hover { color: #808080; } @keyframes .active { 0% { color: #808080; } 100% { color: #808080; ) } @keyframes example { 0% { color: #DBDBDB; } 100% { color: #622cd8; ) }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="home.css"> <script src='script.js'> </script> <title>Home</title> </head> <body> </head> <body> <ul id='menu'> <li><a class="active" href="#home" id="home">.home()</a></li> <li><a class="inactive" href="#news">.about()</a></li> <li><a class="inactive" href="#contact">.stuff()</a></li> <li><a class="inactive" href="#about">.apply()</a></li> </ul> </body> </html>
Seperti yang anda lihat, apabila anda menuding pada pautan pertama (iaitu keadaan aktif), ia masih kelabu dan pautan lain bertukar menjadi ungu dalam masa 0.5s
masa.