利用CSS3实现图片全屏显示



9 33 12



特效描述:利用CSS3实现 图片 全屏显示,利用CSS3实现图片全屏显示

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="base.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>

2. HTML代码

<div style="text-align:center;clear:both">
</div>
<div class="page">
	<header id="header">
		<hgroup class="white blank" style="position:relative;z-index:9999;color:orange;font-size:30px;text-shadow:0 1px 1px #000;">
			<h1></h1>
			<h2></h2>
		</hgroup>
	</header>
	<section class="demo">
		<div class="slider">
			<ul class="clearfix">
				<li><a href="#bg1">Hipster Fashion Haircut </a></li>
				<li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
				<li><a href="#bg3">My haire is sooo fantastic!</a></li>
				<li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
				<li><a href="#bg5">Lips so kissable I could die ...</a></li>
			</ul>
		</div>
		<img src="bg1.jpg" alt="" class="bg slideLeft" id="bg1" /> 
		<img src="bg2.jpg" alt="" class="bg slideBottom" id="bg2" /> 
		<img src="bg3.jpg" alt="" class="bg zoomIn" id="bg3" /> 
		<img src="bg4.jpg" alt="" class="bg zoomOut" id="bg4" /> 
		<img src="bg5.jpg" alt="" class="bg rotate" id="bg5" /> 
	</section>
</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片切换 图片选项卡 图标选项卡 背景切换 大图切换 全屏切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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