<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滑过按钮展开CSS3动画特效 - 网页模板</title>
<link rel="stylesheet" href="css/ionicons.min.css">
<script src="dist/lib/modernizr.touch.js"></script>
<link href="css/index.css" rel="stylesheet">
<link href="dist/mfb.css" rel="stylesheet">
</head>
<body>
<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main">
<i class="mfb-component__main-icon--resting ion-plus-round"></i>
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="#" data-mfb-label="View on Github" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-github"></i>
</a>
</li>
<li>
<a href="#" data-mfb-label="Follow me on Github" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-octocat"></i>
</a>
</li>
<li>
<a href="#" data-mfb-label="Share on Twitter" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-twitter"></i>
</a>
</li>
</ul>
</li>
</ul>
<section id="panel" class="panel">
<header>
<h1>
Material Floating Buttons
</h1>
<span id="showcode" class="showcode">
<i class="ion-eye icon-yepcode"></i>
<i class="ion-eye-disabled icon-nocode"></i>
</span>
</header>
<article>
<p>
<select id="selections-fx">
<option value=" mfb-zoomin " selected>Zoom in</option>
<option value=" mfb-slidein ">Slide in</option>
<option value=" mfb-slidein-spring ">Slide in (spring)</option>
<option value=" mfb-fountain ">Fountain</option>
</select>
<select id="selections-pos">
<option value="mfb-component--tl ">top left</option>
<option value="mfb-component--tr ">top right</option>
<option value="mfb-component--bl ">bottom left</option>
<option value="mfb-component--br " selected>bottom right</option>
</select>
</p>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</article>
</section>
<script src="dist/mfb.js"></script>
<script type="text/javascript">
var panel = document.getElementById('panel'),
menu = document.getElementById('menu'),
showcode = document.getElementById('showcode'),
selectFx = document.getElementById('selections-fx'),
selectPos = document.getElementById('selections-pos'),
// demo defaults
effect = 'mfb-zoomin',
pos = 'mfb-component--br';
showcode.addEventListener('click', _toggleCode);
selectFx.addEventListener('change', switchEffect);
selectPos.addEventListener('change', switchPos);
function _toggleCode() {
panel.classList.toggle('viewCode');
}
function switchEffect(e){
effect = this.options[this.selectedIndex].value;
renderMenu();
}
function switchPos(e){
pos = this.options[this.selectedIndex].value;
renderMenu();
}
function renderMenu() {
menu.style.display = 'none';
// ?:-)
setTimeout(function() {
menu.style.display = 'block';
menu.className = pos + effect;
},1);
}
</script>
</body>
</html>
鼠标滑过按钮展开CSS3动画特效.zip
版权申诉
10 浏览量
2022-11-26
11:03:16
上传
评论
收藏 276KB ZIP 举报
鼠标滑过按钮展开CSS3动画特效.zip （13个子文件） 
鼠标滑过按钮展开CSS3动画特效 
鼠标滑过按钮展开CSS3动画特效.jpg 19KB jiaoben4660 css 
ionicons.min.css 50KB index.css 4KB fonts ionicons.eot 118KB ionicons.ttf 184KB ionicons.woff 66KB
index.html 3KB dist mfb.js 2KB mfb.css 34KB mfb.css.map 8KB mfb.min.js 615B mfb.min.css 26KB lib modernizr.touch.js 2KB资源评论
