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