CSS基础 华为渐变色产品列表 综合实战

华为网页链接：https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent

html代码部分：

      <div class="box">
        <ul>
            <li>
                <a href="#">

                    <img src="./images/product.jpeg" alt="">
                    <div class="product-info">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>

                    </div>
                    <div class="mask"></div>

                </a>
           </li>

           <li>
            <a href="#">

                <img src="./images/huawei1.jpeg" alt="">
                <div class="product-info">
                    <h4>行业洞察</h4>
                    <h5>迈向智能世界2030</h5>
                    <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>

                </div>
                <div class="mask"></div>

            </a>
       </li>

         <li>
            <a href="#">

                 <img src="./images/huawei2.jpeg" alt="">
                 <div class="product-info">
                    <h4>产品</h4>
                    <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                    <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>

               </div>
              <div class="mask"></div>

            </a>
         </li>
      </ul>    

    </div>

CSS样式部分
     /* 清除默认的margin和padding */
*{
    margin: 0;
    padding: 0;
}
/* 去除a标签下划线 */
a{
    text-decoration: none;
}
/* 去除li标签圆点 */
li {
    list-style: none;
}
/* 设置版心，也就是最大的外面的盒子 */
.box{
    width: 1110px;
    height: 247px;
    /* background-color: pink; */
    margin: 0 auto;
}
/* 用按标签设置盒子，并将其左浮动 */
.box li a{
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    /* background-color: skyblue; */
    margin-right: 30px;
    overflow: hidden;    /*超出盒子大小不显示*/
}
.box li:last-child a {
    margin-right: 0;
}
.box img{
    transition: all .5s;
    width: 350px;
    /* height: 247px; */
}
/* 设置文字部分的样式，并定位 */
.box .product-info{
    position: absolute;
    bottom: -50px;
    left: 0;
    /* margin: 0 auto; */
    width: 350px;
    height: 181px;
    /* background-color: orange; */
    padding: 20px 30px;
    box-sizing: border-box;
    z-index: 2;         /*提升显示层叠，不然会受到渐变背景影响*/
    transition: all .5s;
}
.box .product-info h4{
    font-weight: inherit;
    font-size: 14px;
    height: 29px;
    color: #fff;
}
.box .product-info h5{
    height: 54px;
    font-weight: inherit;
    font-size: 18px;
    margin-bottom: 40px;
    color: #fff;
}
.box .product-info p{
    font-size: 14px;
    color: #fff;

}
.box .product-info .icon-arrow-right{
    display: inline-block;  /* 使用transform，不能是行内元素，否则无效*/

    transition: all .5s;

    color: red;
}
/* 设置渐变色，并定位 */
.box .mask{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
}

/* 设置hover */
.box a:hover .mask{
    opacity: 1;
}
.box a:hover img{
    transform: scale(1.2);
}
.box a:hover .product-info {
    transform: translateY(-50px);
}
.box  .more:hover .icon-arrow-right{

    transform: translateX(20px);
}