Magic動畫庫制作CSS3動畫特效



108 428 143



特效描述: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

加群請備注:從官網了解到

老夫子电子