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. java中什么是bridge method（桥接方法）

    java中什么是bridge method(桥接方法) https://blog.csdn.net/z69183787/article/details/81115524

  2. Linux1_Ubuntu的安装

    安装Ubuntu双系统大致有两种方式: 如果是Vmware+linux系统的话,先下载个securable.exe监测本机是否支持虚拟机的安装 1) wubi.exe安装(13.*版本不支持)2) 刻 ...

  3. iOS中 HTTP/Socket/TCP/IP通信协议具体解释 韩俊强的博客

    简介: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 // 3. 会话层 // 4. 传输层 // 5. 网络层 // 6. 数据链接层 / ...

  4. saltstack内置state模块file之append

    添加文件文本在文件尾部 salt.states.file.append(name, text=None, makedirs=False, source=None, source_hash=None, ...

  5. a byte of vim -- 学习摘要

    说在前面的话 -- a byte of vim 是我见过的最介绍vim 最好的书,想了解强大的vim的人,或者是已经在使用vim而打算进一步了解的人,我感觉都应该看看这个,内容精炼但涵盖非常广,--& ...

  6. github-readme.md-格式

    大标题 大标题一般显示project名,类似html的<h1> 你仅仅要在标题以下跟上=====就可以 中标题 中标题一般显示重点项,类似html的<h2> 你仅仅要在标题以下 ...

  7. VC++MFC对话框程序中给对话添加背景图片

    VC对话框怎么显示背景图片呢.在MFC中实现背景图片,不像C#应用程序那么简单.今天就和朋友们说说如何在VC界面中设置背景图片 ^_^   工具/原料 Visual C++ 2010 方法一:用Pic ...

  8. 低秩近似 low-rank approximation

  9. Ax=λx=λIx

  10. netbeans无法新建项目

    在ubuntu上安装netbeans最新版(7.3.1),但是安装之后发现无法新建项目,一直提示请等待,google之后说是jdk的问题,查看了一下jdk的版本为1.6.试着安装了1.7版本的,问题解 ...