<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行 hover 效果</title> <style type="text/css"> ul{width: 800px;margin: 0 auto;padding: 0;} li{height: 80px;line-height: 80px;list-style: none;text-indent: 2em;position: relative;box-sizing: border-box;} li a{display: block;text-decoration: none;color: #333;z-index: 10;} li a:hover{color: #a80;} li::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transition: left .24s cubic-bezier(.445,.05,.55,.95),width .24s cubic-bezier(.445,.05,.55,.95),background-color .24s cubic-bezier(.455,.03,.515,.955),height .12s cubic-bezier(.445,.05,.55,.95) .1s; -o-transition: left .24s cubic-bezier(.445,.05,.55,.95),width .24s cubic-bezier(.445,.05,.55,.95),background-color .24s cubic-bezier(.455,.03,.515,.955),height .12s cubic-bezier(.445,.05,.55,.95) .1s; transition: left .24s cubic-bezier(.445,.05,.55,.95),width .24s cubic-bezier(.445,.05,.55,.95),background-color .24s cubic-bezier(.455,.03,.515,.955),height .12s cubic-bezier(.445,.05,.55,.95) .1s; background-color: #f2f2f2; content: ''; z-index: -1; } li:first-child::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #f2f2f2; content: ''; } li:hover::after { left: -2%; width: 104%; height: calc(100% + 2px); } </style> </head> <body> <ul> <li><a href="http://chaoyuyan.com/" target="_blank">超语言</a></li> <li><a href="http://cz.xcabc.com/" target="_blank">西游车展网</a></li> <li><a href="https://www.zhihu.com/" target="_blank">知乎</a></li> <li><a href="https://weibo.com/3008509015/profile?topnav=1&wvr=6&is_all=1" target="_blank">微博</a></li> <li><a href="http://www.dota2.com/procircuit?l=schinese" target="_blank">dota2积分查询</a></li> </ul> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>hover</title> <style type="text/css"> body{background: #f5f5f5;} ul{margin: 0;padding: 0;list-style: none;} li{width: 295px;height: 405px;float: left;background: #fff;transition: all .2s linear;margin-left: 25px;} li:hover{-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -5px, 0);transform: translate3d(0, -5px, 0); z-index: 3;} li img{width: 100%;} .img-wrap{display: block;width: 100%;height: 300px;overflow: hidden;} </style> </head> <body> <ul> <li><span class="img-wrap"><img src="http://img2.xcabc.com/201708/18/20170818095705122440.jpg" alt=""></span></li> <li><span class="img-wrap"><img src="http://img2.xcabc.com/201708/18/20170818100602895954.jpg" alt=""></span></li> <li><span class="img-wrap"><img src="http://img2.xcabc.com/201708/09/20170809110939985639.jpg" alt=""></span></li> </ul> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 行 hover 效果 喜欢 (0)or分享 (0)
