HTML里使图片放大，旋转

来源：互联网发布：ecshop 2.0数据字典编辑：程序博客网时间：2024/05/18 03:29

<!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 rotate360_1 {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* 逆时针旋转360度 */
        @keyframes rotate360_2 {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(-360deg);
            }
        }

        .bottom ul li:nth-child(1):hover {
            animation: rotate360_1 4s linear;
        }

        .bottom ul li:nth-child(2):hover {
            animation: rotate360_2 4s linear;
        }

        .bottom ul li:nth-child(3):hover {
            transform: scale(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>

阅读全文

0 0