css实现悬浮下划线抖动动画菜单效果代码
代码语言:html
所属分类:悬停
代码描述:css实现悬浮下划线抖动动画菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Varela+Round"); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; padding: 0; margin: 0; letter-spacing: 1.1px; } body, html { width: 100%; height: 100%; background: #1c1d22; font-family: "Varela Round", sans-serif; } .menu { display: flex; justify-content: center; align-items: center; max-width: 720px; margin: 0 auto; height: 100vh; list-style: none; } .menu li { width: 125px; height: 50px; transition: background-position-x0.9s linear; text-align: center; } .menu li a { font-size: 22px; color: #777; text-decoration: none; transition: all 0.45s; } .menu li:hover { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiI.........完整代码请登录后点击上方下载按钮下载查看
网友评论0