TweenMax实现左侧浮动弹出式菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:TweenMax实现左侧浮动弹出式菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在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> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } .container { width: 100%; height: 100vh; min-height: 500px; background-image: url("//repo.bfw.wiki/bfwrepo/image/629a8b6537dde.png"); background-size: cover; background-attachment: fixed } .menu { background: rgb(0, 184, 212); color: #fff; cursor: pointer; transition: all .3s; padding: 15px 25px; } ul {font-size: 0} ul li { background: rgba(255, 255, 255, .45); margin-bottom: 10px; width: 200px; padding: 20px 10px; border-left: 7px solid rgb(0, 184, 212); position: relative; overflow: hidden; border-radius: 0 5px 5px 0; color: #fff; cursor: pointer; transition: all .3s; font-size: 16px; text-transform: uppercase; left: -250px } ul li:hover { background: rgba(255, 255, 255, 1); padding-left: 20px; color: rgb(0, 184, 212) } ul li .fa {margin-right: 7px} ul li:after { content: ""; width: 100px; height: 50px; position: absolute; top: -15px; right: -40px; background: rgb(0, 184, 212); transform: rotate(50deg) } .overlay { width: 100%; height: 100%; transition: all 2s; } .overlay.show { background: rgba(0, 0, 0,.75); } </style> </head> <body&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0