CSS3 transition属性制作水平手风琴鼠标点击手风琴展开收起



142 564 189



特效描述:CSS3 transition属性制作 水平手风琴 鼠标点击手风琴 展开收起,水平手风琴鼠标点击手风琴展开收起

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>

3. HTML代码

<div class="ia-container">
	<figure>
		<img src="images/1.jpg" alt="image01" />
		<input type="radio" name="radio-set" checked="checked"/>
		<figcaption><span>True Colors</span></figcaption>
		<figure>
			<img src="images/2.jpg" alt="image02" />
			<input type="radio" name="radio-set" />
			<figcaption><span>Honest Light</span></figcaption>
			<figure>
				<img src="images/3.jpg" alt="image03" />
				<input type="radio" name="radio-set" />
				<figcaption><span>Silent Serenity</span></figcaption>
				<figure>
					<img src="images/4.jpg" alt="image04" />
					<input type="radio" name="radio-set" />
					<figcaption><span>Warm Welcome</span></figcaption>
					<figure>
						<img src="images/5.jpg" alt="image05" />
						<input type="radio" name="radio-set" />
						<figcaption><span>Sensible Magic</span></figcaption>
						<figure>
							<img src="images/6.jpg" alt="image06" />
							<input type="radio" name="radio-set" />
							<figcaption><span>Lovely Midnight</span></figcaption>
							<figure>
								<img src="images/7.jpg" alt="image07" />
								<input type="radio" name="radio-set" />
								<figcaption><span>Illuminated Darkness</span></figcaption>											
								<figure>
									<img src="images/8.jpg" alt="image08" />
									<input id="ia-selector-last" type="radio" name="radio-set" />
									<figcaption><span>Happy Child</span></figcaption>
								</figure>
							</figure>
						</figure>	
					</figure>
				</figure>
			</figure>
		</figure>
	</figure>
</div>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 叠加浮动层 选项卡切换 滑动手风琴 收缩展开 层叠叠加 焦点图 幻灯片 图片轮播 图片叠加 图片滑动 图片收缩展开 图片轮播 滑动手风琴 手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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