css实现炫酷下拉菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现炫酷下拉菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Rajdhani:300); html, body { overflow: hidden; background-size: 100% 100%; width: 100%; height: 100%; font-family: 'Rajdhani', sans-serif; font-size: 18px; letter-spacing: .1em; body{background-color: #1F1F1F; } } .glow, .scifiUI:hover h1, .scifiUI:hover ul li { box-shadow: 0 0 25px #00dcdc, 0 1px 5px #212121; border-color: #00dcdc; background: #00dcdc; color: rgba(33, 33, 33, 0.7); } .scifiUI { width: 300px; margin: 100px auto; } .scifiUI:hover h1:after { border-top-color: rgba(33, 33, 33, 0.7); } .scifiUI:hover ul li { transform: skew(0); width: 300px; height: 50px; } .scifiUI:hover ul li:nth-child(1) { left: 0; } .scifiUI:hover ul li:nth-child(2) { left: 0; } .scifiUI:hover ul li:nth-child(3) { left: 0; } .scifiUI:hover ul li:nth-child(4) { left: 0; } .scifiUI:hover ul li:nth-child(5) { left: 0; } .scifiUI:hover ul li:nth-child(6) { left: 0; } .scifiUI:hover ul li:nth-child(7) { left: 0; } .scifiUI * { transition: all 300ms ease-in-out; } .scifiUI h1 { position: relative; display: block; width: 300px; height: 50px; line-height: 50px; border: 1px solid #00bebe; background: rgba(0, 190, 190, 0.2); color: #00bebe; font-size: 1.6em; text-align: center; cursor: pointer; } .scifiUI h1:after { content: ''; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0