snap左侧菜单弹出动画效果代码-html代码-BFW代码库

snap左侧菜单弹出动画效果代码

代码语言：html

代码描述：snap左侧菜单弹出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<meta name="description" content="Adding elasticity with SVG shape animations" />
		<meta name="keywords" content="svg, morph, snap.svg, effect, animation, css, shape" />
		<meta name="author" content="Codrops" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/classie.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
    

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	color: #fff;
	background: #2f3238;
	font-weight: 400;
	font-size: 1em;
	font-family: 'Raleway', Arial, sans-serif;
}

a {
	color: #B24E51;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #afb3b8;
	outline: none;
}

.theme-2 { background: #434d55; }
.theme-2 a { color: #4991C2; }
.theme-2 a:hover, .theme-2 a:focus { color: #74777b; }

.theme-3 { background: #e4eaea; color: #74777b;}
.theme-3 a { color: #e35583; }
.theme-3 a:hover, .theme-3 a:focus { color: #74777b; }

.theme-4 a { color: #6EAE8C; }
.theme-4 a:hover, .theme-4 a:focus { color: #74777b; }

.theme-5 { background: #e4eaea; color: #74777b;}
.theme-5 a { color: #EA8686; }
.theme-5 a:hover, .theme-5 a:focus { color: #74777b; }

.theme-6 a { color: #CFB75C; }
.theme-6 a:hover, .theme-6 a:focus { color: #74777b; }

.theme-7 { background: #E8E8E8; color: #FF72AD;}
.theme-7 a { color: #415c71; }
.theme-7 a:hover, .theme-7 a:focus {.........完整代码请登录后点击上方下载按钮下载查看