我按老师教的案例写的，里面IMG的图片一放大位置就变了怎么回事

来源：2-10 过渡效果实战课（2）

weixin_慕村1291783

2020-10-16 17:58:46

# 具体遇到的问题

我按老师教的案例写的，里面IMG的图片一放大位置就变了怎么回事
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="">
    <style>        ul,        li {            padding: 0;            margin: 0;            list-style: none;        }                .box {            width: 480px;            height: 107px;            /* background-color: #ccc; */            margin: 0 auto;        }                ul li {            position: relative;            width: 107px;            height: 107px;            float: left;            margin-right: 13px;            /* background-color: pink; */        }                .box ul li::before {            content: '';            display: block;            width: 107px;            height: 107px;            transition: transform 1s ease 0s;        }                .box ul li:nth-child(1)::before {            background-image: url(images/a_1.png);        }                .box ul li:nth-child(2)::before {            background-image: url(images/a_2.png);        }                .box ul li:nth-child(3)::before {            background-image: url(images/a_3.png);        }                .box ul li:nth-child(4)::before {            background-image: url(images/a_4.png);        }                .box ul li img {            width: 60px;            height: 60px;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            /* transition: transform 1s ease 0s; */        }                .box ul li:hover::before {            transform: rotate(360deg);        }                .box ul li:hover img {            transform: scale(1.1);        }    </style>
</head>
<body>
    <div class="box">        <ul>            <li>                <img src="images/icon1.svg" alt="">            </li>            <li>                <img src="images/icon2.svg" alt="">            </li>            <li>                <img src="images/icon3.svg" alt="">            </li>            <li>                <img src="images/icon4.svg" alt="">            </li>
        </ul>    </div>

</body>
</html>

写回答

1回答