純CSS3動畫屬性按鈕控制焦點圖滑動切換效果



112 447 150



特效描述:純CSS3動畫屬性 按鈕控制 焦點圖滑動切換,純CSS3實現絢麗焦點圖切換效果,這是一款純CSS3實現的焦點圖插件,焦點圖設計十分清新簡單,圖片滑動特別流暢,是一款值得一用的CSS3焦點圖。

代碼結構

1. 引入CSS

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

2. HTML代碼

<div id="gal">
	<nav class="galnav">
		<ul>
			<li>
				<input type="radio" name="btn" value="one" checked="checked" />
				<label for="btn"></label>
				<figure>
					<img src="images/01_Fabio_Basile.jpg" />
					<figcaption>
						<h4>Fabio Basile</h4>
						<nav role='navigation'>
							<p>iPhone 6 Infinity</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
			<li>
				<input type="radio" name="btn" value="two" />
				<label for="btn"></label>
				<figure class="entypo-forward">
					<img src="images/08_Brian_Miller.jpg" />
					<figcaption>
						<h4>Brian Miller</h4>
						<nav role='navigation'>
							<p>TypeTi.me</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
			<li>
				<input type="radio" name="btn" value="three" />
				<label for="btn"></label>
				<figure class="entypo-forward">
					<img src="images/05_Nicolas_Quod.jpg" />
					<figcaption>
						<h4>Nicolas Quod</h4>
						<nav role='navigation'>
							<p>Iphone 6 - Notification - iOS 7</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
			<li>
				<input type="radio" name="btn" value="four" />
				<label for="btn"></label>
				<figure class="entypo-forward">
					<img src="images/04_Joffrey.jpg" />
					<figcaption>
						<h4>Joffrey</h4>
						<nav role='navigation'>
							<p>Nicolas Quod</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
			<li>
				<input type="radio" name="btn" value="five" />
				<label for="btn"></label>
				<figure class="entypo-forward">
					<img src="images/09_Jared_Long.jpg" />
					<figcaption>
						<h4>Jared Long</h4>
						<nav role='navigation'>
							<p>Don&#39;t drop your iPhone Infinity</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-behance"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
			<li>
				<input type="radio" name="btn" value="six" />
				<label for="btn"></label>
				<figure class="entypo-forward">
					<img src="images/02_Charles_Treece.jpg" />
					<figcaption>
						<h4>Charles Treece</h4>
						<nav role='navigation'>
							<p>iPhone 6 Infinity Side Status Bar</p>
							<ul>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-dribbble"></a></li>
								<li><a href="http://www.dijiuzhanzhang.com/" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>
		</ul>
	</nav>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 加載動畫 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 h5彈窗動畫 html5彈窗動畫 切換按鈕 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 h5按鈕動畫 html5按鈕動畫 帶標題的焦點圖 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 文字滑動 文字滑塊 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子