CSS3_天猫商品墙

天猫商品墙

• 网格状布局：

1.  ul li 布局

2.  float: left; 使得元素在一行。注意： 父元素解决高度塌陷

3.  ul 设置固定宽，使得元素挤下去

4.  给父元素加一个 padding-left 和 padding-top 使得 背景色缝隙 充当 网格最左边的边线

5.  给 li 同意加 一个 margin-right 和 margin-bottom，使得 背景色缝隙 充当 网格线

 

• li 的结构
• 3D 空间

  • <div class="double_face">
        <div class="img_nav_back">
            <img src="./img/"/>
        </div>
    
        <div class="img_nav_front">
            <img src="./img/"/>
        </div>
    </div>

  • 加背景要给两张图片的 父元素 div 加
  •  

                #list li .img_3d{
                    width: 121px;
                    height: 108px;
                    position: relative;
                    transform-style: preserve-3d;
                }
                
                #list li .img_3d .img_back ,
                #list li .img_3d .img_front {
                    position: absolute;
                    top:0;
                    left: 0;
                    width: 121px;
                    height: 108px;
                    line-height: 108px;
                    text-align: center;
                    background: #FFFFFF;
                }
                
                #list li .img_3d .img_back img ,
                #list li .img_3d .img_front img {
                    display: inline-block;
                    vertical-align: middle;
                }
                
                #list li .img_3d .img_back{
                    transform: rotateY(180deg);
                }

 

• mask 遮罩

  •             #list li .mask{
                    position: absolute;
                    top:0;
                    left: 0;
                    width: 121px;
                    height: 108px;
                    background: rgba(0,0,0,0.6);
                    text-align: center;
    
                    /*display: none;*/
                    opacity: 0;
                }
                
            // 监控过渡，移入慢慢显示，移出立刻消失
                #list li:hover .mask{
                    transition: 3s;
                    /*display: block;*/
                    opacity: 1;
                }
    
                #list li .mask img{
                    float: right;
                    margin-top: 10px;
                    margin-right: 10px;
                }
                #list li .mask p{
                    margin-top: 45px;
                    color: #FFFFFF;
                    font-size: 12px;
                    text-align: center;
                }
                
                #list li .mask a{
                    text-decoration: none;
                    color: #FFFFFF;
                    background: red;
                    border-radius: 10px;
                    font-size: 12px;
                    padding: 0 15px;
                }

 

• 切换按钮
  • 鼠标进入，无过渡动画    #btn:hover { transition: 0; }
  • 鼠标离开，有过渡动画
  • 点击计次
  • 翻转延迟差（斜线数组控制，取余获得列数）
    • • colNum = arrIndex % 总列数;
      • rowNum = Math.floor(arrIndex / 总列数);
      • 延时 arr[i] = (coLnum+rowNum)*100; 毫秒

 

•  

              #btn{
                  background: #fff;
                  text-align: center;
  
                  transition: 2s;
              }
              
              #refresh{
                  margin: 33px auto 0px;
                  width: 28px;
                  height: 28px;
                  background-image: url("img/refresh.png");
                  background-repeat: no-repeat;
              }
              
              #btn:hover{
                  background: #dd2727;
                  color: #FFFFFF;
  
                  transition: none;
                  /*transition: 0s;*/
              }
              
              #btn:hover #refresh{
                  background-image: url("img/refresh-white.png");
              }