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. oracle中的not in和not exists注意事项

    NOT IN:不包括空值 NOT EXISTS:包括空值

  2. android 常用方法总结

    public class Toolkit { /** * * Role:Telecom service providers获取手机服务商信息 <BR> * * 需要加入权限<uses ...

  3. centos6下手工编译vitess

    vitess是youtub开源的一款mysql代理,在ubuntu下编译非常方便.可是在centos下且不能訪问google的情况下坑比較多.近期依据其bootstrap.sh脚本手工编译成功.把过程 ...

  4. UIview层次管理

    将一个UIView显示在最前面只需要调用其父视图的 bringSubviewToFront()方法. 将一个UIView层推送到背后只需要调用其父视图的 sendSubviewToBack()方法.

  5. phpexcel导入xlsx文件报错xlsx is not recognised as an OLE file 怎么办

    最初的做法  代码如下 1 include 'classes/PHPExcel/IOFactory.php'; 2 $inputFileName = $target; 3 $objReader = n ...

  6. 打造一个高逼格的android开源项目——小白全攻略 (转)

    转自:打造一个高逼格的android开源项目 小引子 在平时的开发过程中,我们经常会查阅很多的资料,最常参考的是 github 的开源项目.通常在项目的主页面能看到项目的简介和基本使用,并且时不时能看 ...

  7. PerconaXtraBackup-2.2.8手册翻译

    1.1.2 Percona Xtrabackup特性 * 不停机创建Innodb数据库热备 * 对Mysql数据库创建增量备份 * 压缩数据流方式备份到异地服务器 * 更加便捷创建新的mysql从库 ...

  8. js自己定义插件-选项卡

    该功能比較简单.巩固一下jquery插件写法,注意引入的jquery.js  . 自己定义插件路径代码例如以下: 页面: <!doctype html> <html> < ...

  9. centos set up samba

    原文中文链接:https://wiki.centos.org/zh/HowTos/SetUpSamba 原文英文链接:https://wiki.centos.org/HowTos/SetUpSamba ...

  10. lua元表(简单例子)

    Set = {} Set.mt = {}--定义普通的表作为元表,为了避免命名污染直接放在Set内部 function Set.new(t) local set = {} setmetatable(s ...