鼠标滑过字体颜色从左向右渐变:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } body>div{ width: 1200px; margin:0 auto; } ul#nav{ background: #11120D; } ul#nav li{ display: inline-block; } ul#nav li a{ position: relative; display: block; color:#fff; text-decoration: none; line-height: 50px; margin:0 10px; } /*这里是主要的效果*/ a:hover { color: #00a78e; } a:hover::before { max-width: 100%; } a::before{ position: absolute; top: 0; left: 0; overflow: hidden; max-width: 0; height: 80%; border-bottom: 3px solid #00a78e; color: #00a78e; content: attr(data-hover); -webkit-transition: max-width 0.4s; -moz-transition: max-width 0.4s; transition: max-width 0.4s; } </style></head><body> <div> <ul id="nav"> <li> <a href="#home" data-hover="主页">主页</a> </li> <li> <a href="#service" data-hover="服务">服务</a> </li> <li> <a href="#about" data-hover="关于我">关于我</a> </li> <li> <a href="#home" data-hover="主页">主页</a> </li> <li> <a href="#service" data-hover="服务">服务</a> </li> <li> <a href="#about" data-hover="关于我">关于我</a> </li> <li> <a href="#home" data-hover="主页">主页</a> </li> <li> <a href="#home" data-hover="主页">主页</a> </li> <li> <a href="#service" data-hover="服务">服务</a> </li> <li> <a href="#about" data-hover="关于我">关于我</a> </li> <li> <a href="#home" data-hover="主页">主页</a> </li> </ul> </div></body></html>
随时随地看视频
