慕家居作业，制作顶部nav时给图标添加了过渡后页面一刷新文字会自己动一下，把all换成transform就没事了为什么？

来源：2-4 页面顶部的开发（3）

weixin_慕村1291783

2020-10-20 16:20:02

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

/* 头部样式 */

.header-min .top {
    height: 40px;
    background-color: #0058AA;
}

.header-min .top .center-wrap>p {
    line-height: 40px;
    width: 211px;
    color: #fff;
    font-size: 18px;
}

.header-min .nav-top {
    height: 101px;
}

.header-min .nav-top .logo {
    width: 192px;
    height: 91px;
    background: url(../images/慕家居.png) no-repeat;
    margin-top: 19px;
    margin-right: 109px;
    text-indent: -9999px;
}

.header-min .nav-top .logo:hover {
    cursor: pointer;
}

.header-min .nav-top .main-nav {
    width: 570px;
}

.header-min .nav-top .main-nav ul li {
    float: left;
    margin-top: 19px;
    margin-right: 60.9px;
}

.header-min .nav-top .main-nav ul li:last-child {
    margin-right: 0;
}

.header-min .nav-top .main-nav ul li .icon {
    width: 50px;
    height: 50px;
    /* background-color: #0058AA; */
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    margin-bottom: 20px;
    transition: all 1s linear 0s;
}

.header-min .nav-top .main-nav ul li .icon1::after,
.header-min .nav-top .main-nav ul li .icon2::after,
.header-min .nav-top .main-nav ul li .icon3::after,
.header-min .nav-top .main-nav ul li .icon4::after,
.header-min .nav-top .main-nav ul li .icon5::after {
    content: '';
    display: block;
    width: 33px;
    height: 33px;
    background: url(../images/home-gry.png) no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -16.5px;
    left: 50%;
    margin-left: -16.5px;
}

.header-min .nav-top .main-nav ul li .icon2::after {
    background: url(../images/abouts-gry.png) no-repeat;
}

.header-min .nav-top .main-nav ul li .icon3::after {
    background: url(../images/kefu-gry.png) no-repeat;
}

.header-min .nav-top .main-nav ul li .icon4::after {
    background: url(../images/chanpin-gry.png) no-repeat;
}

.header-min .nav-top .main-nav ul li .icon5::after {
    background: url(../images/home-gry.png) no-repeat;
}

.header-min .nav-top .main-nav ul li .bt {
    text-align: center;
}

.header-min .nav-top .main-nav ul li .gywm {
    background: url(../images/abouts-gry.png) no-repeat;
}

.header-min .nav-top .main-nav ul li .icon1:hover::after {
    background: url(../images/home-white.png);
}

.header-min .nav-top .main-nav ul li .icon:hover {
    background-color: #0058AA;
    transform: scale(1.1);
}
在这里输入代码，可通过选择【代码语言】突出显示
上面是样式表下面是HTML
<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="Keywords" content="家居，装修，装饰，风格，北欧">    <meta name="Description" content="触手可及的家居格调">    <title>慕家居</title>    <link rel="stylesheet" href="css/base.css">    <link rel="stylesheet" href="css/reset.css">    <link rel="stylesheet" href="css/index.css"></head>
<body>        <header class="header-min">        <div class="top">            <div class="center-wrap">                <p class="fr">服务热线: 400-8888-888</p>            </div>        </div>        <div class="nav-top center-wrap">            <h1 class="logo fl">慕家居</h1>            <div class="main-nav fl">                <ul>                    <li>                        <a href="" class="icon icon1 db "></a>                        <a href="" class="bt">网站首页</a>                    </li>                    <li>                        <a href="" class="icon2 db icon"></a>                        <a href="" class="bt">关于我们</a>                    </li>                    <li>                        <a href="" class="icon3 db icon"></a>                        <a href="" class="bt">服务建设</a>                    </li>                    <li>                        <a href="" class="icon4 db icon"></a>                        <a href="" class="bt">产品中心</a>                    </li>                    <li>                        <a href="" class="icon5 db icon"></a>                        <a href="" class="bt">服务大厅</a>                    </li>                </ul>            </div>            <div class="search fr">31</div>        </div>    </header></body>
</html>