简单的旋转，放大，缩小（HTML5）

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

简单的旋转，放大，缩小 （HTML5）

相关推荐

简单的旋转，放大，缩小（HTML5）