怎么在HTML5中实现一个图片悬停放大效果-营山大橙子建站

RELATEED CONSULTING

新闻中心

这里有您想知道的互联网营销解决方案

怎么在HTML5中实现一个图片悬停放大效果

这篇文章将为大家详细讲解有关怎么在HTML5中实现一个图片悬停放大效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

西塞山网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

HTML5 代码如下：



    
    CSS3图片悬停放大动画

另外附上两个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

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中实现一个图片悬停放大效果
网站链接：http://scyingshan.cn/article/jpsics.html

其他资讯

快速导航

友情链接

网站建设

联系方式

企业：青羊区大橙子信息咨询工作室
地址：成都市青羊区太升南路288号
电话：18980820575
网址：www.scyingshan.cn

公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575

网站备案号：蜀ICP备2022028542号-24

营山大橙子建站营山网站建设营山网站设计营山网站制作成都做网站