纯CSS3实现超酷幻灯片图文切换效果 博客分类： 网页特效 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内图文格式

 

 

<li>
				<input type="radio" name="btn" value="one" checked="checked" />
				<label for="btn"></label>
				<figure>
					<img src="images/1.jpg" />
					<figcaption>
						<h4>Fabio Basile</h4>
						<nav role='navigation'>
							<p>iPhone 6 Infinity</p>
							<ul>
								<li><a href="#" class="entypo-dribbble"></a></li>
								<li><a href="#" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>

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