<div class="slideshow">
<input type="checkbox" id="image1" /><label for="image1" class="toggle"><img src="../gall/pic_40h.jpg" alt="" /></label>
<input type="checkbox" id="image2" /><label for="image2" class="toggle"><img src="../gall/pic_33h.jpg" alt="" /></label>
<input type="checkbox" id="image3" /><label for="image3" class="toggle"><img src="../gall/pic_18h.jpg" alt="" /></label>
</div>
<style>
.slideshow {width:300px; height:60px; margin:250px auto;}
input {position:absolute; left:-9999px; display:none;}
label.toggle {display:block; width:80px; height:60px; margin:10px; position:relative; cursor:pointer; float:left; z-index:10;
-webkit-transition: 0s 1s;
-moz-transition: 0s 1s;
-o-transition: 0s 1s;
transition: 0s 1s;
}
label.toggle img {display:block; width:80px; height:60px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
input:checked + label {z-index:100;
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
input:checked + label img {
-webkit-transform:scale(8);
-moz-transform:scale(8);
-o-transform:scale(8);
transform:scale(8);
}
</style>
分享到:
相关推荐
纯CSS3实现的图片放大缩小效果
HTML css图片放大效果,鼠标放在图片上后图片放大,离开后缩小
CSS3点击图片遮罩放大显示特效是一款支持点击放大显示图片特效下载。
首先真的非常感谢世界上有了CSS3这么个东西,它使得很多网页特效不再需要依赖javascript脚本代码,使得浏览器执行起来更加方便快捷。但有一点我们得注意,因为目前绝大多数浏览器还是比较“旧”的版本,还不支持CSS3...
纯css3图片导航点击显示动画图片列表和图片内容展示
一款挺有创意的js+css3图片3D倾斜布局点击弹窗放大预览代码,图片放大幻灯片切换展示。学习交流。
CSS3鼠标滑过放大图片 CSS3鼠标滑过放大图片 CSS3鼠标滑过放大图片
纯CSS实现图片点击放大带关闭按钮的图片特效源码.zip
CSS3图片悬停放大动画效果
纯css3鼠标悬停放大图片两边模糊效果 纯css3鼠标悬停放大图片两边模糊效果 纯css3鼠标悬停放大图片两边模糊效果 纯css3鼠标悬停放大图片两边模糊效果
这是一款使用纯css3制作的图片分类过滤效果插件。该插件可以过滤出所有图片中的某一类图片。该图片分类过滤共有三种效果:图片模糊效果,图片缩小模糊效果和放大缩小效果。
这是一款使用纯css3制作的图片点击弹出动画遮罩层效果。该动画遮罩层demo中为模板展示,当点击模板图片后,图片缩小并在图上方弹出半透明遮罩层,显示模板各个模块的功能。
CSS3鼠标悬停图片放大效果,图片默认3行4列排列,鼠标经过图片突出显示。
纯css3鼠标移上图片放大遮罩效果代码 纯css3鼠标移上图片放大遮罩效果代码 纯css3鼠标移上图片放大遮罩效果代码 纯css3鼠标移上图片放大遮罩效果代码
这是一款很有意思的使用纯css3制作的3d弹跳小球动画。该css3小球动画效果非常逼真,可以用鼠标按住小球使其缩小,放开鼠标后小球又会慢慢放大。
jQuery CSS3图片放大镜插件是一款jQuery基于css3属性制作鼠标悬停图片放大镜预览查看效果代码。
纯CSS实现方格图片鼠标划过放大效果下载
jquery+css实现的,点击图片或链接弹出遮罩层,并且图片放大展示的一套demo