html5点击图片放大,html5实现图片缩放
图片悬停放大效果：
HTML5代码如下：
！DOCTYPE html head meta http-equiv= Content-Type Content= text/html；charset=utf-8/titleCSS3图片悬停放大动画/title link rel=样式表 href= CSS/image-hover。 CSS type= text/CSS link rel= style sheet 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 另外附上两个钢性铸铁样式(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)；浮动：左；左边距：-50px；边距-右侧：-50px；页边距-顶部：-10px；-网络工具包-过渡-时长：0.5s-moz-过渡-持续时间：0.5s；用作复合形式的末尾元音过渡-持续时间：0.5s}。img img { padding:10px；边框：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)；用作复合形式的末尾元音盒-影：0px 0px 30px # ccc}。img .遮罩{宽度：100%;背景色：rgb(0，0，0)；位置：绝对；身高：100%;不透明度：0.6;光标：指针；-网络工具包-过渡-时长：0.5s-moz-过渡-持续时间：0.5s；用作复合形式的末尾元音过渡-持续时间：0.5s}#img-1:悬停。口罩{高度：0%;}#img-2:悬停。口罩{高度：0%;边距-顶部：130像素}#img-4:悬停。蒙版{左边距：219像素边距-顶部：135像素身高：0%;宽度：0%;}#img-3 #mask-1宽度：50%;} # img-3 #遮罩-2{宽度：50%;左边距：211px}#img-3:hover #mask-1{宽度：0%;} # img-3:hover # mask-2 { margin-left:430 px；宽度：0%;}#img-5:悬停。蒙版{左边距：219像素边距-顶部：135像素身高：0%;宽度：0%;-WebKit-transform:rotateX(360度)；-moz-转换：旋转(360度)；-o型转换：旋转(-360度);}#img-6:悬停。蒙版{左边距：219像素边距-顶部：135像素身高：0%;宽度：0%;-WebKit-transform:rotateZ(750度)；-moz-transform:rotateZ(750度)；表示“具有…性质的”变换：旋转(750度);}image-hover-main.css
html{高度：100%;边距：0;填充：0;宽度：100%;背景色：# 242424;字体系列：arial}身体{身高：100%;边距：0自动；填充：0;宽度：980px} #徽标{背景色：# 242424；颜色：# F1F1F1字体大小：43px填充：15px 0 6 pxtext-shadow:0 0 2px # FFFFFF；} # logo a { color:# f1 f1；} #容器{宽度：100%;最小高度：800像素背景色：# 000;} a {颜色：rgb(0，114，191)；文字-装饰：无；}.heading { font-size:24px；颜色：# dfdfdf文本对齐：居中；padding-top:20px；}.legal { text-align:center；颜色：5 F5 f5f字体大小：16px边距-顶部：100像素背景：-moz-线性-渐变(中心顶部，#000,#242424)重复滚动00透明；背景：-WebKit-渐变(线性，左上，左下，色停(0,#000),色停(1,# 242424));背景：-哦-渐变（线性，左上，左下，色停(0,#000),色停(1,# 242424));} a {颜色：rgb(0，114，191)；文字-装饰：无；}.警告{ color:# 555；文本对齐：居中；字体大小：12px}。msg { color:# dfdfdf；文本对齐：居中；字体大小：14px行高：1.5厘米；}.清除修复{ clear:both；浮动：无；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。