html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

HTML5 图片悬停放大的实现代码示例

发布时间：2022-04-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

图片悬停放大效果：

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
&nbsp;

html{
    height:100%;
    margin:0;
    padding:0;
    width:100%;
    background-color:#242424;
    font-family:arial;
}
body{
    height:100%;
    margin:0 auto;
    padding:0;
    width:980px;
}
#LOGo  {
    background-color:#242424;
    color:#F1F1F1;
    font-Size:43px;
    padding:15px 0 6px;
    text-shadow:0 0 2px #FFFFFF;
}
#logo a {
    color:#F1F1F1;
}
#container{
    width:100%;
    min-height:800px;
    background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.heading{
    font-size:24px;
    color:#DFdfdf;
    text-align:center;
    padding-top:20px;
}
.legal{
    text-align:center;
    color:5f5f5f;
    font-size:16px;
    margin-top:100px;
    background:-moz-linear-gradient(center top , #000, #242424) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));
    background:-o-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));

}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.warning{
    color:#555;
    text-align:center;
    font-size:12px;
}
.msg{
    color:#dfdfdf;
    text-align:center;
    font-size:14px;
    line-height:1.5em;
}
.clearfix{
    clear:both;
    float:none;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5 图片悬停放大的实现代码示例全部内容，希望文章能够帮你解决HTML5 图片悬停放大的实现代码示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程