html-transform-09

最新推荐文章于 2021-11-06 18:58:27 发布

原创最新推荐文章于 2021-11-06 18:58:27 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

9 篇文章

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
  *{
    margin:0 auto;
    }


   body{
       background:url(../images/bg.jpg) no-repeat;
       background-size:cover;
       }


.div1{
    width:auto;
    height:200px;
    text-align:center;
    }



.div2{
    width:auto;
    height:40px;
    text-align:center;
    line-height:80px;
}   


.div2 span{

    position:relative;


    }





.div2 input{

    height:30px;
    border: 1px solid #999;

}


.div2 input:hover{

    transform:scale(1.5,1.5);


    }

.div2 img{
    position:absolute;
    right:10px;
    width:24px;
    top:50%;
    margin-top:-12px;;
}


.div2 img:hover{
    transform:scale(1.4,1.4);
    }

.btn{
    width:120px;
    height:35px;
    background:#06F;
    border:none;
    color:#F00;
}

.div2 button:hover{
    color: #F00;
    transform:scale(2,2)
}




.div3{
    width:auto;
    height:600px;
    text-align:center;
    margin-top:200px;


    }



.lie{

    width:720px;
    height:140px;
    list-style:none;
    }



.lie:hover{
    transform:rotate(360deg);
    transition:2s;

    }



.lie li img{
    width:128px;
    height:128px;
    float:left;
    margin:5px;
}


.lie .img1:hover{
    transform:rotate(360deg);
    transition:3s;

    }

.lie .img2:hover{
    transform:rotate(-360deg);
    transition:3s;

    }




.lie .img3:hover{
    transform:scale(1.5);
    transition:2s;

}

.lie .img4:hover{
    transform:skew(0deg,50deg)
}   





</style>




</head>

<body>
<div class="div1">
<img src="../images/logo.png" />
</div>

<div class="div2">
<span><input type="text" size="70"/> <img src="../images/相机.png"/></span>

<button class="btn" >百度一下</button>

</div>

<div class="div3">
   <ul class="lie">
       <li><img class="img1" src="../images/weijuchiluntu.jpg" /></li>
       <li><img src="../images/yuanjihuasy.png" /></li>
       <li><img src="../images/sunlinanian.png" /></li>
       <li><img src="../images/gaoqingdonmanxiaotuzis.jpg" /></li>
        <li><img src="../images/duoroubanqq.jpg"</li>
   </ul>


<ul class="lie">

<li><img class="img2" src="../images/touxixiaoqinx.jpg"</li>
<li><img src="../images/xiaoqingxbanq.jpg"</li>
<li><img class="img3" src="../images/fengjingxiaotu.jpg"</li>
<li><img  class="img4"src="../images/bizhi112.png"</li>
<li><img src="../images/banquantupian801.png"</li>
</ul>






</div>






</body>
</html>