鼠標滑過字體顏色從左向右漸變
鼠标滑过字体颜色从左向右渐变:
<!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>
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦