<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Baidu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
width: 640px;
height: 34px;
margin: 64px auto;
}
.top span {
width: 540px;
height: 34px;
position: relative;
float: left;
}
/* 搜索输入框 */
.top input {
width: 540px;
height: 34px;
font-size: 18px;
}
/* 相机小图片,父元素.top span */
.top img {
position: absolute; /* 父元素position: relative,这里的position: absolute相对父元素绝对定位 */
right: 8px; /* 定位到父元素span的右边,并且离右边8px */
top: 50%; /* 离父元素span的上面一半的距离,父元素span的高除以2,结果:34/2 = 17px */
margin-top: -12px; /* 上移12px,居中 */
width: 24px;
height: 24px;
}
/* 百度一下 */
.top button {
width: 100px;
height: 38px;
font-size: 16px;
}
.top input:hover {
transform: scale(1.5, 1.5); /* 放大1.5倍 */
}
.top img:hover {
transform: scale(1.2, 1.2); /* 放大1.2倍 */
}
.top button:hover {
transform: scale(2, 2); /* 放大2倍 */
color: red;
}
.bottom {
width: 720px;
height: 272px;
margin: 64px auto;
}
.bottom ul {
width: 720px;
height: 144px;
}
.bottom ul li {
float: left;
width: 128px;
height: 128px;
padding: 8px;
}
.bottom ul li img {
width: 128px;
height: 128px;
}
/* 顺时针旋转360度 */
@keyframes a{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 逆时针旋转360度 */
@keyframes b {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.bottom ul li:nth-child(1):hover {
animation:a 4s linear;
}
.bottom ul li:nth-child(2):hover {
animation: b 4s linear;
}
.bottom ul li:nth-child(3):hover {
transform: scale(1.5, 1.5); /*放大1.5倍*/
}
.bottom ul li:nth-child(4):hover {
transform: skew(0deg, 50deg); /* 倾斜50度 */
}
</style>
</head>
<body>
<div class="top">
<span>
<input type="text" name=""/><img src="camera_off.png">
</span>
<button>百度一下</button>
</div>
<div class="bottom">
<ul>
<li><img src="top1.jpg"></li>
<li><img src="top2.png"></li>
<li><img src="top3.png"></li>
<li><img src="top4.jpg"></li>
<li><img src="top5.jpg"></li>
</ul>
<ul>
<li><img src="bottom1.jpg"></li>
<li><img src="bottom2.jpg"></li>
<li><img src="bottom3.jpg"></li>
<li><img src="bottom4.png"></li>
<li><img src="bottom5.png"></li>
</ul>
</div>
</body>
</html>
===============================================================================================================
一下是自己写的
<style> *{ text-align: center; } #a:hover{ /*放大*/ transform: scale(2) } #b:hover{ /*放大*/ transform: scale(2); color: red; } #c:hover{ /*旋转360*/ transition: transform 0.5s; transform: rotate(360deg); } #d:hover{ /*放大*/ transform: scale(3); } #e:hover{ /*倾斜 50度*/ transform: skew(0deg,50deg); } </style> </head> <body background="www.jpg"> <div> <input id="a" type="text"> <button id="b">百度一下</button> </div> <div> <table border="1"> <tr> <td><img id="c" src="a1.jpg" height="168" width="192"/></td> <td><img id="d" src="a2.png" height="168" width="192"/></td> <td><img id="e" src="a3.png" height="168" width="192"/></td> <td><img id="f" src="a4.jpg" height="168" width="192"/></td> <td><img id="z" src="a5.jpg" height="168" width="192"/></td> </tr> </table>