效果体验：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>图片切换1a>li>li>a href=http://hovertree.com/texiao/css3/10/#bg2>图片切换2a>li>li>a href=http://hovertree.com/texiao/css3/10/#bg3>图片切换3a>li>li>a href=http://hovertree.com/texiao/css3/10/#bg4>图片切换4a>li>li>a href=http://hovertree.com/texiao/css3/10/#bg5>图片切换5a>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