效果体验：http://hovertree.com/texiao/css3/10/

一般做图片切换效果，都会使用JS或者jQuery脚本，今天发现，其实只用CSS也可以实现。试试效果吧。

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯CSS3实现全屏背景切换焦点图效果 - 何问起</title>

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/10/css/style.css" media="all" />

</head>

<body>

<div class="slider">

<ul class="clearfix">

<li><a href="http://hovertree.com/texiao/css3/10/#bg1">图片切换1</a></li>

<li><a href="http://hovertree.com/texiao/css3/10/#bg2">图片切换2</a></li>

<li><a href="http://hovertree.com/texiao/css3/10/#bg3">图片切换3</a></li>

<li><a href="http://hovertree.com/texiao/css3/10/#bg4">图片切换4</a></li>

<li><a href="http://hovertree.com/texiao/css3/10/#bg5">图片切换5</a></li>

</ul>

</div>

<div class="hovertreecontent">

<h1>何问起 纯CSS3实现全屏背景切换焦点图效果</h1>

<a href="http://hovertree.com/h/bjaf/8c5uhche.htm" target="_blank">原文</a> <a href="http://hovertree.com/" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a>

</div>

<img src="http://hovertree.com/texiao/css3/10/images/bg1.jpg" alt="美图" class="bg slideLeft" id="bg1" />

<img src="http://hovertree.com/texiao/css3/10/images/bg2.jpg" alt="美图" class="bg slideBottom" id="bg2" />

<img src="http://hovertree.com/texiao/css3/10/images/bg3.jpg" alt="美图" class="bg zoomIn" id="bg3" />

<img src="http://hovertree.com/texiao/css3/10/images/bg4.jpg" alt="美图" class="bg zoomOut" id="bg4" />

<img src="http://hovertree.com/texiao/css3/10/images/bg5.jpg" alt="美图" class="bg rotate" id="bg5" />

</body>

</html>

转自：http://hovertree.com/h/bjaf/8c5uhche.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

css3全屏背景图片切换特效的更多相关文章

  1. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  2. css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...

  3. [css]全屏背景图片设置,django加载图片路径

    <head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...

  4. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  5. css3全屏背景显示

    background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...

  6. H5-设置全屏背景图片样式

    .bgimg{ width: 100%; height: 95vh; margin: 0; padding: 0 .32rem; background-image: url('../image/ld. ...

  7. 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

    今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...

  8. 全屏背景：15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  9. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

随机推荐

  1. AngularJS SPA Template For Visual Studio

    单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...

  2. .NET中那些所谓的新语法之二：匿名类、匿名方法与扩展方法

    开篇:在上一篇中,我们了解了自动属性.隐式类型.自动初始化器等所谓的新语法,这一篇我们继续征程,看看匿名类.匿名方法以及常用的扩展方法.虽然,都是很常见的东西,但是未必我们都明白其中蕴含的奥妙.所以, ...

  3. SQL Server null知多少？

    null是什么? 不知道.我是说,他的意思就是不知道(unknown). 它和true.false组成谓词的三个逻辑值,代表“未知”.与true和false相比,null最难以令人捉摸,因为它没有明确 ...

  4. Thread.Sleep引发ThreadAbortException异常

    短信平台记录日志模块,是通过异步方式来记录的,即日志工具类里初始化一个Queue对象,公共的写日志方法的处理逻辑是把日志消息放到Queue里.构造器里设定一个死循环,不停的读队,然后把日志消息持久化到 ...

  5. 每天一个linux命令（46）：vmstat命令

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...

  6. titit. 深入理解 内聚（ Cohesion）原理and  attilax大总结

    atitit. 深入理解 内聚( Cohesion)原理and  attilax大总结         1.1. 内聚的概念 1 1.1.1. 高内聚模式关于这个问题给出的答案是:分配职责,使其可保持 ...

  7. Uiautomator 2.0之Configrator类学习小记

    1. Configration类介绍 1.1. Configrator用于设置脚本动作的默认延时 1.2  Configrator功能: 1.2.1 可调节两个模拟动作之间的默认间隔 1.2.2 可调 ...

  8. Nginx配置文件nginx.conf详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  9. sizzle编译函数

    一个人去完成一件事情,如果派多个人去做的话,只要配合默契,效率比一个人做肯定要高,效率提高,所需的时间就减少了.如果只能一个人完成,那么必须设法提高自己的劳动效率,这个提高可以是量的改变也可以是质的改 ...

  10. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...