纯CSS3实现超酷幻灯片图文切换效果

纯CSS3实现绚丽焦点图切换效果，这是一款纯CSS3实现的焦点图插件，焦点图设计十分清新简单，图片滑动特别流畅，是一款值得一用的CSS3焦点图。切换点通过表单radio来实现，通过radio的checked判断图片的切换位置。

当然要使用这个css3特效的话只能在支持CSS3的环境下才行，像IE9以下的那些就不要用了。

判断radio的checked的css3样式如下

 

input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}

body内图文格式

 

 

				
				
				

					
					

						
Fabio Basile
						

							
iPhone 6 Infinity
							

								

								

							
						
  
					
				
			

主要使用了css3中的transition、box-shadow、transform样式来实现动画的效果。