老师帮忙检查一下导航呼吸动画的问题

来源：5-2 项目作业

DB1时间的玫瑰

2021-07-19 14:21:15

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
    font-family: '微软雅黑';
}
.center-wrap {
    width: 1205px;
    margin: 0 auto;
}
.clearfix {
    overflow: hidden;
}
        .site-head {
    height: 161px;
}
/* 页面顶部 */
.site-head .topbar {
    height: 40px;
    background-color: #0058AA;
}
.site-head .topbar .wordbox {
    float: right;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 18px;
}
/* header区域 */
.site-head .main-nav {
    height: 141px;
}
.site-head .main-nav .logo {
    width: 192px;
    height: 91px;
    float: left;
    font-size: 64px;
    color: #0058AA;
    line-height: 91px;
    padding-top: 19px;
    padding-right: 125px;
}
.site-head .main-nav .logo h1 {
    width: 192px;
    height: 91px;
    background-image: url(../images/慕家居.png);
    background-size: cover;
    /* 将段首缩进这个属性设置为负数，可以用这个方法隐藏文字 */
    text-indent: -999em;
    cursor: pointer;
}
/* 导航栏部分 */
.site-head .main-nav .navbox {
    width: 564px;
    padding-top: 28px;
}
.site-head .main-nav .navbox ul {
    float: left;
}
.site-head .main-nav .navbox ul li {
    float: left;
    padding-right: 60px;
}
.site-head .main-nav .navbox ul li img {
    position: relative;
    width: 33px;
    height: 33px;
    left: 14px;
    transition: transform .5s ease 0s;
}
/* 鼠标点击img效果 */
.site-head .main-nav .navbox ul li img:hover {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0058AA;
    transform: scale(1.2);
}
.site-head .main-nav .navbox ul li span {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #545454;
    padding-top: 28px;
}
.site-head .main-nav .navbox ul li:last-child {
    padding-right: 0;
}
/* 搜索框 */
.site-head .main-nav .searchbox {
    float: right;
    width: 277px;
    height: 40px;
    border: 1px solid #D3D3D3;
    margin-top: -51px;
}
.site-head .main-nav .searchbox input {
    float: left;
    width: 229px;
    height: 37px;
    /* 去掉边框线 */
    border: none;
    padding-left: 15px; 
}
.site-head .main-nav .searchbox button {
    float: right;
    width: 48px;
    height: 44px;
    background: #0058AA;;
     /* 边框去掉 */
     border: none;
     /* 设置触碰时候的鼠标的样式 */
    cursor: pointer;
     /* 相对定位来微调位置 */
    position: relative;
    bottom: 39px;
    left: 48px;
}
    </style>
</head>
<body>
    <header class="site-head">
        <!-- 页面顶部 -->
        <div class="topbar">
            <div class="center-wrap">
              <div class="wordbox">
                  服务热线：400-8888-888
                </div>
            </div>
        </div>

        <div class="main-nav">
            <div class="center-wrap">
                <!-- logo -->
                <div class="logo">
                    <h1>慕家居</h1>
                </div>

                <!-- 导航栏 -->
                <nav class="navbox clearfix">
                    <ul>
                        <li>
                            <a href="">
                                <span><img src="images/home-gry.png" alt=""></span>
                                <span>网站首页</span> 
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span><img src="images/abouts-gry.png" alt=""></span>                                
                                <span>关于我们</span>                                
                            </a>
                        </li>
                        <li>
                            <a href="">
                               <span><img src="images/kefu-gry.png" alt=""></span>
                                <span>服务建设</span>                                
                            </a>
                        </li>
                        <li>
                            <a href="">
                               <span><img src="images/chanpin-gry.png" alt=""></span>
                               <span>产品中心</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span><img src="images/fuwu-gry.png" alt=""></span>
                               <span>服务大厅</span>
                            </a>
                        </li>
                    </ul>
                </nav>  
                 
                <!-- 搜索框 -->
                <div class="searchbox">
                    <form action="">
                        <input type="text" placeholder="请输入搜索内容">
                        <button><img src="images/search.png" alt=""></button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- banner -->
    <section class="banner"> 
    </section>

    <!-- 小商品轮播图 -->
    <section class="xsplb">
    </section>
</body>
</html>