利用CSS3实现跳动焦点广告特效



11 42 15



特效描述:利用CSS3实现 跳动焦点 广告特效,利用CSS3实现跳动焦点广告特效

代码结构

1. 引入CSS

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />

2. HTML代码

<div class="container">
	<div id="slider">
		<div id="mask"><!-- This masks an unordered list (<ul>) while it's sliding from right to left. Here's an illustration of what's going on (The ='s are the slides and the [ ] is the mask):
						Slide 1:    [=]=== 
						Slide 2:   =[=]==
						Slide 3:  ==[=]=
						Slide 4: ===[=]
						In summary, as the unordered list moves from right to left, the mask ([ ]) will only show the content (portion of the unordered list) that is currently inside of it. If it weren't for this mask, you'd see all of the slides going across your window.
						-->
			<ul><!-- Sets up the previously mentioned unordered list. This will structure the slides and lay them out horizontally/inline with eachother (by default, an unordered list would display list items (<li>) vertically. However, with some CSS magic (display:inline;), the list items will line up horizontally -->
				<li><!-- Sets up a list item that will contain one of our slides -->
					<a href="#" title="View my first image link"><img src="images/1.png" /></a><!-- This image is wrapped in an achor tag (<a>) to open up another page (or in this case, the image) when clicked on. If you don't want a slide to link to another page, simply remove the <a> tags -->
				</li>
				<li>
					<a href="#" title="View my second image link"><img src="images/2.png" /></a>
					<span><!-- The text wrapped in this span tag will become this slide's caption. If you do not want a caption, simply remove the span tag and all content/tags inside of it -->
						<h2>Image Caption</h2>
						<p>Lorem ipsum dolor...</p>
					</span>
				</li>
				<li>
					<iframe src="http://en.wikipedia.org/wiki/Calvin_and_Hobbes" width="600" height="200" frameborder="0" scrolling="no"></iframe><!-- This slide is pulling an entire web page from another website using the <iframe> tag. This goes to show that you can insert anything into the slides - even a video! This is why it's important for the slider to pause on mouseover. The pause will allow people to interact with whatever your slide contains - without it slapping them in the face and sliding away (that would suck)  -->
					<span>
						<h2>Iframe Caption</h2>
					</span>
				</li>
				<li>			
					<a href="#" title="View my third image link"><img src="images/3.png" /></a>
				</li>
			</ul><!-- Ends the unordered list that contains our slides -->
		</div><!-- Ends the slider mask. Everything outside of this tag will no longer be masked -->
		<div id="progress"><!-- Sets up our progress bar to show the remaining time of the current slide. This will be animated to go from 1px wide to the full width of the slide (600px) -->
		</div>
		<div id="overlay"><!-- Used to add a dope gradient ontop of the slider. Simply remove this <div> if you don't want any type of overlay -->
		</div>
		<div id="pause"><!-- This contains the pause icon that appears when hovering over the slider. Again, if you don't want the icon to appear, simply remove this <div> -->
		</div>
	</div>
</div>



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


热门标签: flash焦点图 flash幻灯片 flashbanner flash图片轮播 渐隐切换 淡出淡进 淡出 淡进 焦点图 幻灯片 轮播图 bar焦点图 图片淡出淡进 图片淡出 图片淡进 纯图片轮播 图片轮播
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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