鼠标滑过按钮展开CSS3动画特效

CSS3 鼠标滑过 动画效果 CSS3按钮 2018-11-09

控件介绍
鼠标滑过按钮展开CSS3动画特效是一款Material design风格,鼠标滑过按钮时以炫酷的方式展开其他按钮。
浏览器兼容

支持IE9+

演示下载 2317
使用方法

在</head>前加入如下代码

<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">

在</body>前加入如下代码

<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>

本文转载请注明出处:http://www.zhuiye.com/detail_2073.html
评论区
  • 还没有评论,快来抢沙发吧!