纯css实现全面屏手机菜单选择效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现全面屏手机菜单选择效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Lato"); *, *:before, *:after { /* Slow, yes I know :) */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Lato, Sans-serif; font-size: 12px; background: #353138; background: -moz-radial-gradient(center, ellipse cover, #353138 0%, #1a181c 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c)); background: -webkit-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: -o-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: -ms-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: radial-gradient(ellipse at center, #353138 0%,#1a181c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1); } .container { margin: 0; width: 100%; height: 100%; padding: 20px; -webkit-perspective: 1500px; -moz-perspective: 1500px; -ms-perspective: 1500px; perspective: 1500px; position: relative; } .toggle { color: #fff; display: inline-block; line-height: 16px; font-size: 20px; float: left; } .menu { margin: 100px auto; position: relative; background: #62278d; background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b)); background: -webkit-linear-gradient(top, #62278d 0%,#2cc09b 100%); background: -o-linear-gradient(top, #62278d 0%,#2cc09b 100%); background: -ms-linear-gradient(top, #62278d 0%,#2cc09b 100%); background: linear-gradient(to bottom, #62278d 0%,#.........完整代码请登录后点击上方下载按钮下载查看
网友评论0