百度首页图标缩放+旋转变形

来源：互联网发布：淘宝可以卖电子书吗编辑：程序博客网时间：2024/05/17 02:17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
background: url("img/body.jpg") no-repeat top;

}
.box{
width: 1000px;
height: 800px;
margin: 100px auto;
/* border: 2px black solid;*/
/* position: absolute;*/
}
.box .nav{
width: 700px;
height: 50px;
margin: 100px auto;
}
.l{
width:500px ;
height: 100%;

background: white;
transition: all 2s ease;
}
.picture{
background: no-repeat;
position: relative;
top: 5px;
right: 50px;
transition: all 2s ease;
}
.picture:hover{
transform:scale(1.2);
}
.r{
width:150px ;
height: 100%;
background: dodgerblue;
transition: all 2s ease;

}

ul{
margin: 5px auto;
width: 1100px;
height: 200px;

}
ul:hover li{
transform: rotate(360deg);
}
li{
float: left;
width: 190px;
height: 100%;
margin: 5px;
transition: all 2s ease;
}
.a{
width: 180px;
height: 100%;
transition: all 2s ease;

}
.b{
width: 180px;
height: 100%;
transition: all 2s ease;

}
.c{
width: 180px;
height: 100%;
transition: all 2s ease;

}
.d{
width: 180px;
height: 100%;
transition: all 2s ease;

}
.e{
width: 180px;
height: 100%;
transition: all 2s ease;

}

.l:hover{
transform:scale(1.5);
}
.r:hover{
color: red;
transform:scale(2);
}
.a:hover{
transform: rotate(360deg);

}
.b:hover{
transform: rotate(360deg);

}
.c:hover{
transform:scale(1.5);

}
.d:hover{
transform: rotate(50deg);

}
.e:hover{
transform:scale(1.5);

}

</style>
</head>
<body>

<div class="box">
<div class="nav">
<input type="text" class="l" >
<img src="img/图片1_03.jpg" class="picture">
<input type="submit" value="百度一下" class="r">
</div>
<ul>
<li><img src="img/a.jpg" class="a">
<li><img src="img/b.jpg" class="b" > </li>
<li><img src="img/c.jpg" class="c"> </li>
<li><img src="img/d.jpg" class="d"> </li>
<li><img src="img/e.jpg" class="e"> </li>
</ul>
<ul>
<li><img src="img/a.jpg" class="a"> </li>
<li><img src="img/b.jpg" class="b" > </li>
<li><img src="img/c.jpg" class="c"> </li>
<li><img src="img/d.jpg" class="d"> </li>
<li><img src="img/e.jpg" class="e"> </li>
</ul>

</div>
</body>
</html>

阅读全文

0 0

百度首页图标 缩放+旋转 变形

百度首页图标缩放+旋转变形