实现鼠标悬浮链接动画高亮效果
分类:实例代码
鼠标悬浮链接动画高亮效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,他事先了鼠标悬浮链接,实现动画高亮效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> div, p, a { margin: 0; padding: 0; } div { position: relative; z-index: 1; width: 800px; padding: 20px; border-radius: 20px; margin: 0 auto; background: #34495e; color: #b4b4b4; font-size: 20px; line-height: 26px; font-family: "Microsoft YaHei"; } div a { position: relative; display: inline-block; outline: none; color: #e74c3c; vertical-align: bottom; text-decoration: none; white-space: nowrap; } div a:before { position: absolute; top: -3px; left: -3px; z-index: -1; width: 100%; height: 100%; box-sizing: content-box; content: ''; padding: 3px; border-radius: 5px; background: #fff; opacity: 0; transition: transform 0.2s, opacity 0.2s; transform: scale(0); } div a:hover:before { opacity: 1; transform: scale(1); } </style> </head> <body> <div> 本站的名称是<a href="#">前端教程网</a> </div> </body> </html>
鼠标悬浮链接动画高亮效果,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮链接动画高亮效果就介绍到这了。