利用HTML5实现SVG图标按钮菜单特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

74 294 99



特效描述:利用HTML5实现 SVG 图标按钮 菜单特效。利用HTML5实现SVG图标按钮菜单特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/TweenMax.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<nav class="nav">
    <ul>
        <li>
            <a href="#" class="active">
                <svg>
                    <use xlink:href="#events">
                </svg>
            </a>
        </li>
        <li>
            <a href="#">
                <svg>
                    <use xlink:href="#inbox">
                </svg>
            </a>
        </li>
        <li>
            <a href="#">
                <svg>
                    <use xlink:href="#profile">
                </svg>
            </a>
        </li>
    </ul>
</nav>
<button class="menu-btn">
    <span></span>
    <span></span>
    <div class="ring"></div>
</button>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" id="events" viewBox="0 0 100 100" >
        <path d="M84.027,93H15.973C11.028,93,7,88.976,7,84.027V23.143c0-4.948,4.028-8.976,8.976-8.976h68.048
		c4.948,0,8.976,4.028,8.976,8.976v60.885C93,88.976,88.976,93,84.027,93z M15.976,21.333c-0.997,0-1.809,0.814-1.809,1.809v60.885
		c0,0.997,0.809,1.806,1.806,1.806h68.055c0.997,0,1.806-0.809,1.806-1.806V23.143c0-0.997-0.814-1.809-1.809-1.809H15.976V21.333z
		 M89.417,35.667H10.583C8.605,35.667,7,34.062,7,32.084c0-1.979,1.605-3.584,3.583-3.584h78.833c1.982,0,3.584,1.605,3.584,3.583
		S91.398,35.667,89.417,35.667z M24.917,24.917c-1.978,0-3.583-1.605-3.583-3.583v-10.75c0-1.978,1.605-3.583,3.583-3.583
		S28.5,8.605,28.5,10.583v10.75C28.5,23.311,26.895,24.917,24.917,24.917z M75.083,24.917c-1.981,0-3.583-1.605-3.583-3.583v-10.75
		C71.5,8.605,73.102,7,75.083,7c1.981,0,3.583,1.605,3.583,3.583v10.75C78.667,23.311,77.065,24.917,75.083,24.917z">
        <circle cx="28.5" cy="75.083" r="3.583">
        <circle cx="28.5" cy="60.75" r="3.583">
        <circle cx="39.25" cy="75.083" r="3.583">
        <circle cx="39.25" cy="60.75" r="3.583">
        <circle cx="39.25" cy="46.417" r="3.583">
        <circle cx="60.75" cy="75.083" r="3.583">
        <circle cx="60.75" cy="60.75" r="3.583">
        <circle cx="60.75" cy="46.417" r="3.583">
        <circle cx="71.5" cy="60.75" r="3.583">
        <circle cx="71.5" cy="46.417" r="3.583">
        <circle cx="50" cy="75.083" r="3.583">
        <circle cx="50" cy="60.75" r="3.583">
        <circle cx="50" cy="46.417" r="3.583">
    </symbol>         
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="inbox">
        <path d="M9.28,38.83l-0.083,0.156c-0.055,0.125-0.101,0.252-0.135,0.384c0,0,0,0.083,0,0.135C9.022,39.685,9.001,39.87,9,40.055
		v43.617c0.005,4.857,3.929,8.799,8.786,8.827h64.387c4.873-0.006,8.821-3.955,8.827-8.827V40.055
		c-0.001-0.185-0.022-0.37-0.062-0.55c0,0,0-0.093,0-0.135c-0.035-0.132-0.08-0.26-0.135-0.384L90.72,38.83
		c-0.055-0.105-0.117-0.206-0.187-0.301l-0.135-0.156c-0.075-0.085-0.154-0.164-0.239-0.239l-0.073-0.073l-10.125-8.37V17.582
		c0-1.434-1.162-2.596-2.596-2.596H62.161l-6.553-5.463c-3.264-2.697-7.983-2.697-11.247,0l-6.553,5.421H22.625
		c-1.434,0-2.596,1.162-2.596,2.596v12.14l-10.125,8.37l-0.073,0.073c-0.085,0.075-0.164,0.154-0.239,0.239l-0.125,0.156
		C9.398,38.618,9.335,38.722,9.28,38.83z M82.173,87.307H17.786c-2.007,0-3.635-1.627-3.635-3.635V45.57l30.2,24.924
		c3.265,2.693,7.982,2.693,11.247,0l30.2-24.924v38.103C85.797,85.675,84.176,87.302,82.173,87.307z M84.333,40.055L79.93,43.69
		v-7.27L84.333,40.055z M47.663,13.573c1.344-1.111,3.288-1.111,4.632,0l1.714,1.412H45.95L47.663,13.573z M74.737,20.178v27.77
		L52.295,66.537c-1.344,1.111-3.288,1.111-4.632,0L25.221,47.948v-27.77C25.221,20.178,74.737,20.178,74.737,20.178z M20.029,36.42
		v7.27l-4.393-3.635L20.029,36.42z">
        <path d="M39.355,36.639h21.289c1.434,0,2.596-1.162,2.596-2.596s-1.162-2.596-2.596-2.596H39.355c-1.434,0-2.596,1.162-2.596,2.596
            S37.921,36.639,39.355,36.639z">
        <path d="M39.355,45.985h21.289c1.434,0,2.596-1.162,2.596-2.596s-1.162-2.596-2.596-2.596H39.355c-1.434,0-2.596,1.162-2.596,2.596
            S37.921,45.985,39.355,45.985z">
        <path d="M39.355,55.332h21.289c1.434,0,2.596-1.162,2.596-2.596s-1.162-2.596-2.596-2.596H39.355c-1.434,0-2.596,1.162-2.596,2.596
            S37.921,55.332,39.355,55.332z">
    </symbol>    
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="profile">
        <path d="M50,7C26.243,7,7,26.243,7,50s19.243,43,43,43s43-19.243,43-43S73.757,7,50,7z M30.865,81.175
        C31.403,70.855,40.11,61.932,50,61.932s18.49,8.815,19.135,19.243C63.545,84.615,56.988,86.55,50,86.55
        S36.455,84.615,30.865,81.175z M50,51.612c-4.622,0-8.385-3.763-8.385-8.385S45.378,34.95,50,34.95s8.385,3.763,8.385,8.385
        S54.622,51.612,50,51.612z M75.048,76.66c-2.042-9.568-9.245-17.522-18.275-20.21c4.73-2.472,8.063-7.418,8.063-13.115
        C64.835,35.165,58.17,28.5,50,28.5s-14.835,6.665-14.835,14.835c0,5.697,3.225,10.642,8.063,13.115
        c-9.03,2.688-16.233,10.535-18.275,20.21C17.858,69.995,13.45,60.535,13.45,50c0-20.103,16.447-36.55,36.55-36.55
        S86.55,29.897,86.55,50C86.55,60.535,82.143,69.995,75.048,76.66z">
    </symbol> 
</svg>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到