百度页面(动画+形变)

最新推荐文章于 2019-02-25 11:46:36 发布

原创最新推荐文章于 2019-02-25 11:46:36 发布 · 376 阅读

CC 4.0 BY-SA版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{margin:0 auto; width:400px; height:100px;}/*整体布局自动居中*/
.back{
width:1100px;
height:800px;
background:url(tupian/timg-1.jpeg);
}
.bb{
width:800px;
height:700px;
margin-top:48px;
margin-left:150px;
}
.d1{width:800px; height:300px;}
.d2{width:800px; height:400px;}

.table1{width:800px; height:200px;}
.table2{width:800px; height:100px; position:relative;}/*relative:相对定位*/
.input:hover{ transform:scale(1.5);}
.input{width:300px; height:30px; border:1px solid #000;}

.photo:hover{transfrom:scale(1.2);}/*缩放,放大到原来的1.2倍*/

.photo{width:24px; height:24px; margin-top:8px; margin-left:-40px; position:absolute; background:url(tupian/haha.png) no-repeat;}/*absolute:绝对定位*/

.baidu:hover{transfrom:scale(1.2); color:red;}
.baidu{width:80px; height:35px; background:#99F; border:1px solid #00F; text-decoration:none;}

img{width: 120px; height: 120px;}
li{width: 120px;
height: 120px;
float: left;
margin-right:20px;
margin-top:20px;
list-style-type:none;
}
.img1{width: 340px; height: 120px; margin-top:50px;}
img{
transition: 1s;
}
.img2:hover{
transform: rotateZ(360deg);/*顺时针旋转360度*/
}
.img3:hover{
transform:translate(100px,20px);/*平移*/
}
.img4:hover{width:240px; height:240px;}
.img5:hover{transform:skew(-50deg); transform-origin:50% 50%;}/*倾斜50度*/
</style>

</head>

<body>
<div class="back">
<div class="bb">
<div class="d1">
<div class="table1" align="center"><img class="img1" src="baidu.JPG"/></div>
<div class="table2" align="center">
<input class="input"/>
<span class="photo"></span>
<button href="#" class="baidu">百度一下</button>
</div>
</div>
<div class="d2">
<ul>
<li><div class="s1"><img class="img2" src="tupian/fruit8.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit11.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit10.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit2.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit3.jpg"/></div></li>
<li><div class="s1"><img class="img3" src="tupian/fruit4.jpg"/></div></li>
<li><div class="s1"><img class="img4" src="tupian/fruit5.jpg"/></div></li>
<li><div class="s1"><img class="img5" src="tupian/fruit6.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit7.jpg"/></div></li>
<li><div class="s1"><img class="img2" src="tupian/fruit11.jpg"/></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>