效果体验：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. 一步步学习javascript基础篇（6）：函数表达式之【闭包】

    回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; }  //函数声明语法定义 2. var sum = funct ...

  2. 掀起你的盖头来：Unit Of Work-工作单元

    写在前面 阅读目录: 概念中的理解 代码中的实现 后记 掀起了你的盖头来,让我看你的眼睛,你的眼睛明又亮呀,好像那水波一模样:掀起了你的盖头来,让我看你的脸儿,看看你的脸儿红又圆呀,好像那苹果到秋天. ...

  3. 几个SQL小知识

    写在前面的话:之前做的一个项目,数据库及系统整体构架设计完成之后,和弟兄们经过一段时间的编码,系统如期上线,刚开始运行一切良好,后来随着数据量的急剧膨胀,慢慢出现了很多莫名其妙的问题,经过调试,修改了 ...

  4. alias指令：设置命令别名

    alias: usage: alias [-p] [name[=value] ... ] 1. 语法    alias [参数][命令别名]=[原命令名称]   2. 功能介绍 该指令主要用于为原命令 ...

  5. C# Azure 存储-分布式缓存Redis工具类 RedisHelper

    using System; using System.Collections.Generic; using Newtonsoft.Json; using StackExchange.Redis; na ...

  6. Spring学习记录(十一)---使用注解和自动装配

    Spring支持用注解配置Bean,更简便. 上面的组件,是根据实际情况配的.比如写的一个类,是做业务处理的,那就用注解@Service表示服务层组件,以此类推.将整体分成不同部分. 要在xml加入c ...

  7. SQL Server 迁移数据到MySQL

    一.背景 由于项目开始时候使用的数据库是SQL Server,后来把存储的数据库调整为MySQL,所以需要把SQL Server的数据转移到MySQL:由于涉及的表比较多,所以想在MySQL中生成对应 ...

  8. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  9. 深入理解this机制系列第二篇——this绑定优先级

    前面的话 上一篇介绍过this的绑定规则,那如果在函数的调用位置上同时存在两种以上的绑定规则应该怎么办呢?本文将介绍this绑定的优先级 显式绑定 pk 隐式绑定 显式绑定胜出 function fo ...

  10. 详解 ML2 Core Plugin（I） - 每天5分钟玩转 OpenStack（71）

    我们在 Neutron Server 小节学习到 Core Plugin,其功能是维护数据库中 network, subnet 和 port 的状态,并负责调用相应的 agent 在 network ...