网站建设时可以用到的很有动感菜单效果,用在移动端效果也很好

厦门网站建设   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:rgba(255,0,0,0.2); } %ball{ background:$fg; border-radius:100%; width:80px; height:80px; margin-left:-40px; position:absolute; top:20px; color:white; text-align:center; line-height:80px; transform:translate3d(0,0,0); transition:transform ease-out 200ms; } .menu-open{ display:none; } .menu-item{ @extend %ball; } .hamburger{ $width:25px; $height:3px; width:$width; height:$height; background:white; display:block; position:absolute; top:50%; left:50%; margin-left:-$width/2; margin-top:-$height/2; transition:transform 200ms; } $hamburger-spacing:8px; .hamburger-1{ transform:translate3d(0,-$hamburger-spacing,0); } .hamburger-2{ transform:translate3d(0,0,0); } .hamburger-3{ transform:translate3d(0,$hamburger-spacing,0); } .menu-open:checked+.menu-open-button{ .hamburger-1{ transform:translate3d(0,0,0) rotate(45deg); } .hamburger-2{ transform:translate3d(0,0,0) scale(0.1,1); } .hamburger-3{ transform:translate3d(0,0,0) rotate(-45deg); } } .menu{ @extend %goo; $width:650px; $height:150px; position:absolute; left:50%; margin-left:-80px; padding-top:20px; padding-left:80px; width:$width; height:$height; box-sizing:border-box; font-size:20px; text-align:left; } .menu-item{ &:hover{ background:white; color:$fg; } @for $i from 1 through $menu-items{ &:nth-child(#{$i+2}){ transition-duration:180ms; } } } .menu-open-button{ @extend %ball; z-index:2; transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-duration:400ms; transform:scale(1.1,1.1) translate3d(0,0,0); cursor:pointer; } .menu-open-button:hover{ transform:scale(1.2,1.2) translate3d(0,0,0); } .menu-open:checked+.menu-open-button{ transition-timing-function:linear; transition-duration:200ms; transform:scale(0.8,0.8) translate3d(0,0,0); } .menu-open:checked~.menu-item{ transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000); @for $i from 1 through $menu-items{ &:nth-child(#{$i+2}){ transition-duration:90ms+(100ms*$i); transform:translate3d(110px*$i,0,0); } } } CSS样式代码   这个在老外的网站演示效果地址是
https://codepen.io/lbebber/pen/pvwZJp

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设时可以用到的很有动感菜单效果,用在移动端效果也很好
分享到:
赞(0)
广告位820*80