纯CSS3的图片集点击放大

最新推荐文章于 2021-08-03 22:36:35 发布

原创最新推荐文章于 2021-08-03 22:36:35 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #animation

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用HTML与CSS实现的图片缩放滑秀效果。通过简单的输入元素与标签配合，可以制作出美观且交互良好的图片展示效果。此方法适用于前端开发者，特别是那些希望提升网站用户体验的人。


<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>