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

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

html代码部分：

      
class="box">
        

            

                "#">
                
                    "./images/product.jpeg" alt="">
                    
class="product-info">
                        
产品
                        
OceanStor Pacific 海量存储斩获2021 Interop金奖
                        
class="more">了解更多 class="iconfont icon-arrow-right">
    
                    
                    
class="mask">
                    
                
           

           

            "#">
            
                "./images/huawei1.jpeg" alt="">
                
class="product-info">
                    
行业洞察
                    
迈向智能世界2030
                    
class="more">了解更多 class="iconfont icon-arrow-right">

                
                
class="mask">
                
            
       

         

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

               
              
class="mask">
            
            
         
      
    
    
        
    

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);
}