1. [代码] 纯CSS3跳动焦点广告轮播特效

<!-- 
 
Author: Developed by Caleb Jacob
 
Author Website: http://iamceege.com/
 
Author Contact: caleb@iamceege.com
 
Description: This is a pure CSS content slider developed to remove the shroud of mystery behind CSS3 animations and transitions.
 
Version: 1.0
 
Browser Support: WebKit and FireFox
 
-----------------------------------------------
 
Usage: You are free to use and abuse this code anyway you'd like for any project (personal or commercial). Please don't directly redistribute and sell this code in any way (if you do, then you don't get a cookie). However, if you're interested in buying or selling this code, feel free to contact me at: caleb@iamceege.com
 
-----------------------------------------------
 
IMPORTANT: If you are wanting to add or subtract to the current amount of slides (4), you will need to change all of the CSS keyframe animations in css/slider.css to reflect your changes. Unfortunately, this is one of the downfalls of stricltly using CSS.
 
-----------------------------------------------
 
If you do end up using this script or finding it helpful, I'd love to hear your thoughts and see what you've done with it! (caleb@iamceege.com)
 
Thanks! And enjoy! :) 
 
 -->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" /> <!-- This CSS creates a ninja that kicks the butt of any browser that rebels against conformity *cough*IE*cough* -->
<link href="css/slider.css" rel="stylesheet" type="text/css" /> <!-- This CSS creates the magic for the slider -->
<link href="css/main.css" rel="stylesheet" type="text/css" /> <!-- This CSS is just boring -->
<title>纯CSS3跳动焦点广告轮播特效 - 模板巴士www.mobanbus.cn</title>
</head>
<body>
<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="data: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>http://www.huiyi8.com/lingsheng/​
                <li>手机铃声
                    <a href="#" title="View my second image link"><img src="data: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="data: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>
</body>
</html>

纯CSS3跳动焦点广告轮播特效的更多相关文章

  1. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  2. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  3. 安卓开发笔记——自定义广告轮播Banner（实现无限循环）

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  4. android 项目学习随笔十六（ 广告轮播条播放）

    广告轮播条播放 if (mHandler == null) {//在此初始化mHandler , 保证消息不重复发送 mHandler = new Handler() { public void ha ...

  5. Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

    为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...

  6. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  7. 自定义View（二)ViewPage广告轮播

    自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...

  8. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. Babel中的stage-0,stage-1,stage-2以及stage-3

    大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...

  2. MapReduce源码分析之JobSplitWriter

    JobSplitWriter被作业客户端用于写分片相关文件,包括分片数据文件job.split和分片元数据信息文件job.splitmetainfo.它有两个静态成员变量,如下: // 分片版本,当前 ...

  3. git修改用户名以及邮箱

    git 修改当前的project的用户名的命令为:git config user.name 你的目标用户名; git 修改当前的project提交邮箱的命令为:git config user.emai ...

  4. 【Mac系统】之fiddler下载和安装

    使用教程参考:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#request 一.首先,在Mac下安装fiddler时, ...

  5. 正负小数点后两位浮点数--jquery

    背景:项目中需要做个对两位小数点的正负浮点数的处理, 要求:非数字或者.字符自动清除,并对.12自动修补.前的0 原理:在输入框中加入两个事件,keyup与blur,keyup处理字符串中非要求的字符 ...

  6. mysql 考勤表异常 【待修改】

    有考勤刷卡记录表,表名为attendance ,有如下字段: 姓名 卡号 刷卡时间 刷卡类型 name id time type    张三 59775623 2010-04-01 07:23:37  ...

  7. Android蓝牙通信具体解释

    蓝牙通信的大概过程例如以下: 1.首先开启蓝牙 2,搜索可用设备 3,创建蓝牙socket.获取输入输出流 4,读取和写入数据 5.断开连接关闭蓝牙 还要发送配对码发送进行推断! 以下是全部的源码:不 ...

  8. DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画（二）

    经过大神指导,上面封装的还不够全面,触摸事件应该也放进自定义中去,那么问题来了,怎么区分呢!,这就涉及到了自定义属性的介绍了 我通过设置属性来判断在onTouch事件中应该进行什么操作,接下来看看改良 ...

  9. map 玩家上线

    map 玩家上线 else if(gs2ms_add_player == pkt.cmd) { PlayerChannel* pPC = new PlayerChannel(this); //加到地图 ...

  10. spider_action

    spider from mobile to mobile to mobile from selenium import webdriver from selenium.webdriver.chrome ...