aaa

来源：互联网发布：网络连接错误代码711 编辑：程序博客网时间：2024/06/06 08:42
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .box{            width: 1400px;            height: 700px;            background: url("img/c.jpg");        }        .box2{            width: 800px;            height: 700px;            margin: 0 auto;        }        p{            text-align: center;            margin-top: 50px;            font-size: 3em;            color: orchid;            transition: all 1s ease;        }        p:hover{            transform:scale(1.5);            -webkit-transform:scale(1.5);            -moz-transform:scale(1.5);            -o-transform:scale(1.5);            -ms-transform:scale(1.5);            color: royalblue;        }        input{            width: 400px;            height: 60px;            line-height: 60px;            transition: all 1s ease;        }        input:hover{            transform:scale(1.2);            -webkit-transform:scale(1.2);            -moz-transform:scale(1.2);            -o-transform:scale(1.2);            -ms-transform:scale(1.2);        }        .box3{            margin-top: 30px;            text-align: center;        }        button{            width:100px ;            height: 60px;            text-align: center;            line-height: 60px;            background: blue;            transition: all 1s ease;        }        button:hover{            transform:scale(2);            -webkit-transform:scale(2);            -moz-transform:scale(2);            -o-transform:scale(2);            -ms-transform:scale(2);            color: red;        }        .box4{            width: 800px;            height: 300px;            margin-top: 100px;        }        img{            width: 120px;            height: 120px;            float: left;            padding: 10px ;        }        .img1{            transition: all 2s ease;        }        .img1:hover{            transform:rotate(360deg);        }        .img6{            transition: all 2s ease;        }        .img6:hover{            transform:rotate(-360deg);        }        .img2{            transition: all 2s ease;        }        .img2:hover{          background: url("img/t.jpg");            transform:scale(1.5);            -webkit-transform:scale(1.5);            -moz-transform:scale(1.5);            -o-transform:scale(1.5);            -ms-transform:scale(1.5);        }        .img8{            transition: all 2s ease;        }        .img8:hover{            transform:scale(1.5);            -webkit-transform:scale(1.5);            -moz-transform:scale(1.5);            -o-transform:scale(1.5);            -ms-transform:scale(1.5);        }        .img9{            transition: all 2s ease;        }        .img9:hover{            -moz-transform: skew(50deg, 30deg);/* 倾斜属性，参数分别表示x,y方的倾斜角度，负数逆时针，正数顺时针 */            -webkit-transform: skew(50deg, 30deg);            -ms-transform: skew(50deg, 30deg);            -o-transform: skew(50deg, 30deg);        }    </style></head><body>  <div class="box">    <div class="box2">       <p>百度图片</p>        <div class="box3">            <input><button>百度一下</button>        </div>        <div class="box4">         <img src="img/a.jpg" class="img1">            <img src="img/a.jpg" class="img2">            <img src="img/aa.jpg" class="img3">            <img src="img/b.jpg" class="img4">            <img src="img/bb.jpg" class="img5">            <img src="img/c.jpg" class="img6">            <img src="img/d.jpg" class="img7">            <img src="img/g.jpg" class="img8">            <img src="img/e.jpg" class="img9">            <img src="img/f.jpg" class="img10">        </div>    </div>  </div></body></html>
阅读全文
0 0