简单的形变

最新推荐文章于 2020-04-29 09:15:30 发布

顾及_Shine

最新推荐文章于 2020-04-29 09:15:30 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/qq_39598738/article/details/78451904

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: url(img/body.jpg);
}

.box {
width: 1418px;
height: 761px;
margin: 0 auto;
}

.top {
width: 750px;
height: 39px;
margin: 170px auto;
}

.text {
width: 521px;
height: 100%;
transition: all 2s ease;
}
.text:hover{
transform: scale(1.5);
}
.xiang {
position: relative;
right: 30px;
top: 3px;
transition: all 2s ease;
}
.xiang:hover{
transform: scale(1.5);
}
.bai {
width: 106px;
height: 100%;
background: #3388ff;
transition: all 2s ease;
}
.bai:hover{
color: red;
transform: scale(1.5);
}
ul {
margin: 0 auto;
width: 900px;
height: 137px;
list-style: none;
}

ul li {
float: left;
width: 153px;
height: 135px;
margin: 5px;
}

.a {
width: 152px;
height: 134px;
transition: all 2s ease;
}

.b {
width: 152px;
height: 134px;
transition: all 2s ease;
}

.c {
width: 152px;
height: 134px;
transition: all 2s ease;
}

.d {
width: 152px;
height: 134px;
transition: all 2s ease;
}

.e {
width: 152px;
height: 134px;
transition: all 2s ease;
}

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

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

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

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

.e:hover {
transform: skew(-30deg);
}
</style>
</head>

<body>
<div class="box">

<div class="top">
<input type="text" class="text" /><img src="img/g.jpg" class="xiang" />
<input type="button" value="百度一下" class="bai" />

</div>
<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>
<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>

顾及_Shine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的形变

* {margin: 0;padding: 0;box-sizing: border-box;}body {background: url(img/body.jpg);}.box {width: 1418px;height: 761px;margin: 0 auto;}.top {width: 750px;height: 39
复制链接

扫一扫