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

最新推荐文章于 2023-08-11 18:27:42 发布

Dewey666

最新推荐文章于 2023-08-11 18:27:42 发布

阅读量431

点赞数

分类专栏：工程搭建文章标签：图片缩放scale CSS过渡transform 图片旋转rotate

本文链接：https://blog.csdn.net/IT666DHW/article/details/78186246

版权

工程搭建专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!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>

Dewey666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度首页图标缩放+旋转变形

Title *{ padding: 0; margin: 0; } li{ list-style: none; } body{ background: url("img/body.jpg") no-repeat top;
复制链接

扫一扫