网站建设
html代码
<h1>gooey menu</h1>
<h2>using css and svg filters</h2>
<h3>by <a href="https://codepen.io/lbebber">lucas bebber</a></h3>
<h4><a href="https://codepen.io/lbebber/pen/lelbeo" target="_blank">version 1</a> – <a href="https://codepen.io/lbebber/pen/rngbpp" target="_blank">version 2</a> – version 3 – <a href="https://codepen.io/lbebber/pen/rawqkr" target="_blank">version 4</a></h4>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
<!– filters –>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<fegaussianblur in="sourcegraphic" result="blur" stddeviation="10"></fegaussianblur>
<fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></fecolormatrix>
<fegaussianblur in="goo" stddeviation="3" result="shadow"></fegaussianblur>
<fecolormatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow"></fecolormatrix>
<feoffset in="shadow" dx="1" dy="1" result="shadow"></feoffset>
<fecomposite in2="shadow" in="goo" result="goo"></fecomposite>
<fecomposite in2="goo" in="sourcegraphic" result="mix"></fecomposite>
</filter>
<filter id="goo">
<fegaussianblur in="sourcegraphic" result="blur" stddeviation="10"></fegaussianblur>
<fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></fecolormatrix>
<fecomposite in2="goo" in="sourcegraphic" result="mix"></fecomposite>
</filter>
</defs>
</svg>
@import "compass/css3";
//vars
$fg:#00bcd4;
$bg:#673ab7;
$pi:3.14;
//config
$menu-items:4;
$open-distance:105px;
$opening-angle:$pi*2;
body{
background:$bg;
color:white;
text-align:center;
}
a{
color:inherit;
}
h1, h2, h3, h4{
margin:0;
margin-bottom:10px;
margin-top:10px;
}
h1{
font-size:3em;
}
%goo{
filter:url('#shadowed-goo');
// debug
//background