css实现四种按钮悬浮下划线动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现四种按钮悬浮下划线动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { font-family: 'Roboto', sans-serif; padding: 0; margin: 0; } small { font-size: 12px; color: rgba(0, 0, 0, 0.4); } h1 { text-align: center; padding: 50px 0; font-weight: 800; margin: 0; letter-spacing: -1px; color: inherit; font-size: 40px; } h2 { text-align: center; font-size: 30px; margin: 0; font-weight: 300; color: inherit; padding: 50px; } .center { text-align: center; } section { height: 100vh; } /* NAVIGATION */ nav { width: 80%; margin: 0 auto; background: #fff; padding: 50px 0; box-shadow: 0px 5px 0px #dedede; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 15px; text-decoration: none; color: #aaa; font-weight: 800; text-transform: uppercase; margin: 0 10px; } nav ul li a, nav ul li a:after, nav ul li a:before { transition: all .5s; } nav ul li a:hover { color: #555; } /* stroke */ nav.stroke ul li a, nav.fill ul li a { position: relative; } nav.stroke ul li a:after, nav.fill ul li a:after { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #aaa; height: 1px; } nav.stroke ul li a:hover:after { width: 100%; } nav.fill ul li a { transition: all 2s; } nav.fill ul li a:after { text-align: left; content: '.'; margin: 0; opacity: 0; } nav.fill ul li a:hover { color: #fff; z-index: 1; } nav.fill ul li a:hover:after { z-index: -10; animation: fill 1s forwards; -webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1; } /* Circle */ nav.circle ul li a { position: relative; overflow: hidden; z-index: 1; } nav.circle ul li a:after { display: block; position: absolute; margin: 0; top: 0; bottom: 0; left: 0; right: 0; content: '.'; color: transparent; width: 1px; height: 1px; border-radius: 50%; background: transparent; } nav.circle ul li a:hover:after { -webkit-animation: circle 1.5s ease-in forwards; } /* SHIFT */ nav.shift ul li a { position:relative; z-index: 1; } nav.shift ul li a:hover { color: #91640F; } nav.shift ul li a:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #F1C40F; visibility: none; opacity: 0; z-index: -1; } nav.shift ul li a:hover:after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0