纯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样式来实现动画的效果。