css3全屏背景图片切换特效-roucheng

效果体验：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  >  

查看更多关于css3全屏背景图片切换特效-roucheng的详细内容...