时间:2021-05-08
图片悬停放大效果:
HTML5 代码如下:
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3图片悬停放大动画</title> <link rel="stylesheet" href="css/image-hover.css" type="text/css"> <link rel="stylesheet" href="css/image-hover-main.css" type="text/css"></head><body> <div id="image-container"> <div class="img" id="img-1"> <div class="mask"></div> <img src="img/01.jpg"> </div> <div class="img" id="img-2"> <div class="mask"></div> <img src="img/07.jpg"> </div> <div class="img" id="img-3"> <div class="mask" id="mask-1"></div> <div class="mask" id="mask-2"></div> <img src="img/05.jpg"> </div> <div class="img" id="img-4"> <div class="mask"></div> <img src="img/04.jpg"> </div> <div class="img" id="img-5"> <div class="mask"></div> <img src="img/06.jpg"> </div> <div class="img" id="img-6"> <div class="mask"></div> <img src="img/08.jpg"> </div> <div class="clearfix"></div> </div> </body></html>另外附上两个css 样式(image-hover.css 和 image-hover-main.css):
image-hover.css
.img{ -webkit-transform:scale(0.6); -moz-transform:scale(0.6); -o-transform:scale(0.6); float:left; margin-left:-50px; margin-right:-50px; margin-top:-10px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; }.img img{ padding:10px; border:1px solid #fff;}.img:hover{ -webkit-transform:scale(0.8); -webkit-box-shadow:0px 0px 30px #ccc; -moz-transform:scale(0.8); -moz-box-shadow:0px 0px 30px #ccc; -o-transform:scale(0.8); -o-box-shadow:0px 0px 30px #ccc; } .img .mask{ width: 100%; background-color: rgb(0, 0, 0); position: absolute; height: 100%; opacity:0.6; cursor:pointer; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s;}#img-1:hover .mask{ height:0%; }#img-2:hover .mask{ height:0%; margin-top:130px;}#img-4:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;}#img-3 #mask-1 { width:50%;}#img-3 #mask-2{ width:50%; margin-left:211px;}#img-3:hover #mask-1{ width:0%;}#img-3:hover #mask-2{ margin-left:430px; width:0%;}#img-5:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%; -webkit-transform: rotateX(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(-360deg);}#img-6:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%; -webkit-transform: rotateZ(750deg); -moz-transform: rotateZ(750deg); -o-transform: rotat(750deg);}image-hover-main.css
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了纯CSS实现图片列表悬停放大效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:片悬停放大*{margin:0;padding:
html5以及jQuery实现本地图片上传前的预览,效果类似如下:选择图片前的页面:选择图片之后的预览效果:下面直接上代码(只是最简单的实现代码,css样式没有
图片放大展示效果的实现代码,可动态生成图片,每次点击看原图的时候为当前id里面的图片HTML*{margin:0;padding:0;}#picOneimg{w
HTML5图片预览需要用到两种方法1.URL2.FileReader直接上代码复制代码代码如下:html5图片上传预览#preview{width:300px;
前一段时间,突然看到一个炫酷的3D旋转相册,这里记录一下,先看效果图:HTML5代码如下:HTML53D旋转图片相册可鼠标悬停*{padding:0;margi