banner特效代码 CSS3跳动焦点广告特效代码

特效描述：利用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 pviously 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>

下载地址

立即下载