效果体验：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. Understand Lambda Expressions in 3 minutes（翻译）

    本文翻译自CodeProject上的一篇简单解释Lambda表达式的文章,适合新手理解.译文后面我补充了一点对Lambda表达式的说明. 1.什么是Lambda表达式? Lambda表达式是一种匿名方 ...

  2. NodeJS写个爬虫，把文章放到kindle中阅读

    这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...

  3. Some warning were found during validation

    前几天做一个iOS下的App更新,到上传的时候出了问题,一直传了大半个小时,结果还是没传完,再试依然不行,于是只好关机,把电脑带回家弄. 回家后出现了更奇怪的事,经过漫长等待后,竟然出现这个提示: 我 ...

  4. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  5. 【VC++技术杂谈008】使用zlib解压zip压缩文件

    最近因为项目的需要,要对zip压缩文件进行批量解压.在网上查阅了相关的资料后,最终使用zlib开源库实现了该功能.本文将对zlib开源库进行简单介绍,并给出一个使用zlib开源库对zip压缩文件进行解 ...

  6. 【VC++技术杂谈007】使用GDI+进行图片格式转换

    本文主要介绍如何使用GDI+对图片进行格式转换,可以转换的图片格式为bmp.jpg.png. 1.加载GDI+库 GDI+是GDI图形库的一个增强版本,提供了一系列Visual C++ API.为了使 ...

  7. eclipse中的javac命令与java命令

    一.eclipse的javac命令:当eclipse对.java(源文件)文件进行保存操作时(快捷键ctrl+s),会执行javac命令.见上图,Default output folder(默认输出文 ...

  8. Sql Server系列：数据库组成及系统数据库

    1. 数据库组成 数据库的存储结构分为逻辑存储结构和物理存储结构. ◊ 逻辑存储结构:说明数据库是由哪些性质的信息所组成.SQL Server的数据库不仅仅只是数据的存储,所有与数据处理操作相关的信息 ...

  9. 解密jQuery事件核心 - 绑定设计（一）

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

  10. Jetstrap 在线构建 Bootstrap 的工具

    Jetstrap 是一个 100% 基于 Web 的 Twitter Bootstrap 构建工具,无需下载软件,只需登录并构建即可.并且别人可以访问你构建的产品.