css实现菜单旋转飞入动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现菜单旋转飞入动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Raleway:500); body { width: 100%; margin: 0; padding: 0; overflow: hidden; background: #f2f2f3; font-family: "Raleway", sans-serif; } body h1 { text-align: center; margin-top: 35px; color: #333333; letter-spacing: 1px; text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3; } .nav { height: 100%; position: fixed; left: -2em; top: 0; z-index: 1000; transform-style: preserve-3d; perspective: 1000px; } .icon { position: absolute; left: 0; top: 0; z-index: 990; height: 100%; background: #262626; } .icon li { border-bottom: 1px solid rgba(0, 0, 0, 0.3); list-style-type: none; } .icon a { display: block; width: 64px; height: 64px; line-height: 64px; text-align: center; font-size: 1.6em; color: #999999; text-shadow: 0 1px 0 black; transition: all 0.5s ease-out; } .icon a:hover { color: white; transform: translateX(10px) scale(1.2); } .nav:hover .text { transform: rotateY(0deg); } .text { position: absolute; left: 63px; top: 0; z-index: 980; height: 100%; background: #262626; border-right: 1px solid rgba(0, 0, 0, 0.3); transition: transform 0.24s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: left; transform: perspective(1000px) rotateY(90deg); } .text li { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .text a { display: block; width: 200px; height: 64px; line-height: 64px; text-indent: 1em; font-size: 1.4em; text-decoration: none; color: #999999; text-shadow: 0 1px 0 black; transition: all 0.5s ease; } .text a:hover { color: white; transform: translateX(-14px); } .nav:hover .info { left: 0; opacity: 1; transition: opacity 0.5s ease-in 0.1s; } .info { position: absolute; padding-left: 2em; bottom: 30px; z-index: 999; width: 264px; color: white; text-align: center; line-height: 1.6; opacity: 0; } .info .logo p { width: 100px; height: 100px; margin: 0 auto; background: #262626; color: #424242; opacity: 0.6; overflow: hidden; text-align.........完整代码请登录后点击上方下载按钮下载查看
网友评论0