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. OpenOffice/LibreOffice的行距问题

    OpenOffice和LibreOffice的默认行距(行间距)都很宽,可以通过以下方法设置. 格式 -> 页面 -> 文字网格 -> 不使用网格

  2. PHP运行环境之IIS FastCGI 进程意外退出解决办法

    本机做了系统,结果之前装好的APACHE环境什么的都没了,不想费事了,这次直接使用WIN8自带的IIS功能了,安装完毕后提示FastCGI 进程意外退出解决办法,这是由于某些加载库加载失败的原因,这里 ...

  3. 【BZOJ】2186 沙拉公主的困惑

    一道很有价值的题. [解析1]欧几里德算法求乘法逆元,前缀和 [Analysis]O(T n log n). [Sum] ①int运算.假设会超出界,第一个数前要加上(LL)即类型转换. ②gcd不变 ...

  4. 装服务器，测试数据库，简单的maven命令

    [说明]今天总体回顾一下:大概是早上装服务器,下午测试数据库,晚上了解简单的maven命令 一:今日完成 1)在远程服务器的tomcat 设置好管理员的登录账号 2)登录tomcat 的项目管理 查看 ...

  5. EF之POCO应用系列2——复杂类型

    在.NET开发中,EF4以前的版本以及LINQ TO SQL都不支持complex数据类型,EF4终于支持complex类型的数据了,这意味着微软的EF框架朝领域驱动方面又迈了一大步. 复杂的数据类型 ...

  6. Spring标签@Aspect-实现面向方向编程(@Aspect的多数据源自动加载)——SKY

    从Spring 2.0开始,可以使用基于schema及@AspectJ的方式来实现AOP.由于@Aspect是基于注解的,因此要求支持注解的5.0版本以上的JDK. 环境要求:    1. mybit ...

  7. 【HTML5开发系列】DOM及其相关

    对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM把Javascript和HTML文档的结构和内容连接起来,通过DOM可以控 ...

  8. 信息搜集之google语法

    总结的比较全,无耻的转了.D: http://blog.csdn.net/chaosa/article/details/1828301 说起Google,可谓无人不知无人不晓.作为世界第一的搜索引擎, ...

  9. Webpack探索【7】--- sourceMap、自动构建刷新功能详解

    本文主要讲sourceMap.自动构建刷新功能.

  10. nginx 基础配置详解

    #本文只对nginx的最基本配置项做一些解释,对于配置文件拆分管理,更详细的集群健康检查的几种方式,检查策略等在此不做详细解释了. #运行用户user nobody;#启动进程,通常设置成和cpu的数 ...