当前位置:Web前端 > > 正文

html5图片上下滚动(HTML5 图片悬停放大的实现代码示例)

时间:2021-10-14 00:02:08类别:Web前端

html5图片上下滚动

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

图片悬停放大效果:

html5图片上下滚动(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>
        <li id="image-container">
                <li class="img" id="img-1">
                    <li class="mask"></li>
                    <img src="img/01.jpg" alt="html5图片上下滚动(HTML5 图片悬停放大的实现代码示例)" border="0" />
    
  • 另外附上两个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;
    }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    上一篇下一篇

    猜您喜欢

    热门推荐