P粉6424362822023-09-04 00:25:02
回答你问题中关于保持激活类在悬停时颜色不变的部分,我所做的就是创建了另一个 @keyframe
,使得在 0%
和 100%
时它们都保持灰色。然后我使用 transition: 0.5s;
来使颜色变化的动画过渡平滑。
@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>
如你所见,当你悬停在第一个链接上(即激活状态),它仍然是灰色的,其他链接在 0.5s
的时间内变为紫色。