Magic动画库制作CSS3动画特效



104 412 138



特效描述:Magic动画库 CSS3动画特效,Magic动画库

代码结构

1. 引入CSS

<link rel="stylesheet" href="magic.min.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/Raleway.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/scripts.js"></script>

3. HTML代码

	<div id="page" class="site">
		<header id="head" class="site-header" role="banner">
            <a id="logo" href="javascript:;" title="minimamente.com">{m}</a>
		</header>
		<div id="main" class="site-main">
			<!-- START DEMO code -->
			<div id="testbox">
				<div id="retrobox"></div>
				<div id="timing" class="perspective"><span class="icon-diamond"></span></div>
			</div>
			<div id="cssoptions">
				<h3>Magic Effects</h3>
				<a rel="nofollow" class="btn" data-test='magic'>magic</a>
				<a rel="nofollow" class="btn" data-test='twisterInDown'>twisterInDown</a>
				<a rel="nofollow" class="btn" data-test='twisterInUp'>twisterInUp</a>
				<a rel="nofollow" class="btn" data-test='swap'>swap</a>
				<h3>Bling</h3>
				<a rel="nofollow" class="btn" data-test='puffIn'>puffIn</a>
				<a rel="nofollow" class="btn" data-test='puffOut'>puffOut</a>
				<a rel="nofollow" class="btn" data-test='vanishIn'>vanishIn</a>
				<a rel="nofollow" class="btn" data-test='vanishOut'>vanishOut</a>
				<h3>Static Effects</h3>
				<a rel="nofollow" class="btn" data-test='openDownLeft'>openDownLeft</a>
				<a rel="nofollow" class="btn" data-test='openDownRight'>openDownRight</a>
				<a rel="nofollow" class="btn" data-test='openUpLeft'>openUpLeft</a>
				<a rel="nofollow" class="btn" data-test='openUpRight'>openUpRight</a>
				<a rel="nofollow" class="btn" data-test='openDownLeftRetourn'>openDownLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='openDownRightRetourn'>openDownRightRetourn</a>
				<a rel="nofollow" class="btn" data-test='openUpLeftRetourn'>openUpLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='openUpRightRetourn'>openUpRightRetourn</a>
				<h3>Static Effects Out</h3>
				<a rel="nofollow" class="btn" data-test='openDownLeftOut'>openDownLeftOut</a>
				<a rel="nofollow" class="btn" data-test='openDownRightOut'>openDownRightOut</a>
				<a rel="nofollow" class="btn" data-test='openUpLeftOut'>openUpLeftOut</a>
				<a rel="nofollow" class="btn" data-test='openUpRightOut'>openUpRightOut</a>
				<h3>Perspective</h3>
				<a rel="nofollow" class="btn" data-test='perspectiveDown'>perspectiveDown</a>
				<a rel="nofollow" class="btn" data-test='perspectiveUp'>perspectiveUp</a>
				<a rel="nofollow" class="btn" data-test='perspectiveLeft'>perspectiveLeft</a>
				<a rel="nofollow" class="btn" data-test='perspectiveRight'>perspectiveRight</a>
				<a rel="nofollow" class="btn" data-test='perspectiveDownRetourn'>perspectiveDownRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveUpRetourn'>perspectiveUpRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveLeftRetourn'>perspectiveLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveRightRetourn'>perspectiveRightRetourn</a>
				<h3>Rotate</h3>
				<a rel="nofollow" class="btn" data-test='rotateDown'>rotateDown</a>
				<a rel="nofollow" class="btn" data-test='rotateUp'>rotateUp</a>
				<a rel="nofollow" class="btn" data-test='rotateLeft'>rotateLeft</a>
				<a rel="nofollow" class="btn" data-test='rotateRight'>rotateRight</a>
				<h3>Slide</h3>
				<a rel="nofollow" class="btn" data-test='slideDown'>slideDown</a>
				<a rel="nofollow" class="btn" data-test='slideUp'>slideUp</a>
				<a rel="nofollow" class="btn" data-test='slideLeft'>slideLeft</a>
				<a rel="nofollow" class="btn" data-test='slideRight'>slideRight</a>
				<a rel="nofollow" class="btn" data-test='slideDownRetourn'>slideDownRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideUpRetourn'>slideUpRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideLeftRetourn'>slideLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideRightRetourn'>slideRightRetourn</a>
				<h3>Math</h3>
				<a rel="nofollow" class="btn" data-test='swashOut'>swashOut</a>
				<a rel="nofollow" class="btn" data-test='swashIn'>swashIn</a>
				<a rel="nofollow" class="btn" data-test='foolishOut'>foolishOut</a>
				<a rel="nofollow" class="btn" data-test='foolishIn'>foolishIn</a>
				<a rel="nofollow" class="btn" data-test='holeOut'>holeOut</a>
				<h3>Tin</h3>
				<a rel="nofollow" class="btn" data-test='tinRightOut'>tinRightOut</a>
				<a rel="nofollow" class="btn" data-test='tinLeftOut'>tinLeftOut</a>
				<a rel="nofollow" class="btn" data-test='tinUpOut'>tinUpOut</a>
				<a rel="nofollow" class="btn" data-test='tinDownOut'>tinDownOut</a>
				<a rel="nofollow" class="btn" data-test='tinRightIn'>tinRightIn</a>
				<a rel="nofollow" class="btn" data-test='tinLeftIn'>tinLeftIn</a>
				<a rel="nofollow" class="btn" data-test='tinUpIn'>tinUpIn</a>
				<a rel="nofollow" class="btn" data-test='tinDownIn'>tinDownIn</a>
				<h3>Bomb</h3>
				<a rel="nofollow" class="btn" data-test='bombRightOut'>bombRightOut</a>
				<a rel="nofollow" class="btn" data-test='bombLeftOut'>bombLeftOut</a>
				<h3>Boing</h3>
				<a rel="nofollow" class="btn" data-test='boingInUp'>boingInUp</a>
				<a rel="nofollow" class="btn" data-test='boingOutDown'>boingOutDown</a>
				<h3>On the Space</h3>
				<a rel="nofollow" class="btn" data-test='spaceOutUp'>spaceOutUp</a>
				<a rel="nofollow" class="btn" data-test='spaceOutRight'>spaceOutRight</a>
				<a rel="nofollow" class="btn" data-test='spaceOutDown'>spaceOutDown</a>
				<a rel="nofollow" class="btn" data-test='spaceOutLeft'>spaceOutLeft</a>
				<a rel="nofollow" class="btn" data-test='spaceInUp'>spaceInUp</a>
				<a rel="nofollow" class="btn" data-test='spaceInRight'>spaceInRight</a>
				<a rel="nofollow" class="btn" data-test='spaceInDown'>spaceInDown</a>
				<a rel="nofollow" class="btn" data-test='spaceInLeft'>spaceInLeft</a>
			</div>
			<!-- END DEMO code -->
		</div><!-- #main -->
	</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 加载动画 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 背景切换 大图切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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