<fieldset id='d8k3x'></fieldset>
<i id='d8k3x'><div id='d8k3x'><ins id='d8k3x'></ins></div></i>

    <code id='d8k3x'><strong id='d8k3x'></strong></code>

      <i id='d8k3x'></i>
        <ins id='d8k3x'></ins>
          <dl id='d8k3x'></dl>
          <span id='d8k3x'></span>

          1. <tr id='d8k3x'><strong id='d8k3x'></strong><small id='d8k3x'></small><button id='d8k3x'></button><li id='d8k3x'><noscript id='d8k3x'><big id='d8k3x'></big><dt id='d8k3x'></dt></noscript></li></tr><ol id='d8k3x'><table id='d8k3x'><blockquote id='d8k3x'><tbody id='d8k3x'></tbody></blockquote></table></ol><u id='d8k3x'></u><kbd id='d8k3x'><kbd id='d8k3x'></kbd></kbd>
            <acronym id='d8k3x'><em id='d8k3x'></em><td id='d8k3x'><div id='d8k3x'></div></td></acronym><address id='d8k3x'><big id='d8k3x'><big id='d8k3x'></big><legend id='d8k3x'></legend></big></address>

            简洁的商品网格列表布局动画特效 - 新媒体运营

            • 时间:
            • 浏览:116706

            这是一款简洁的商品网格列表布局动画特效 。该视频网格列表布局采用卡片网格布局的方式进行布局  。当鼠标悬停到视频图片上面的时候  ,图片会轻微的放大  ,并出现操作图标  。

            使用方法

            HTML结构

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            <div class="container">
              <div class="row">
                  <div class="col-md-3 col-sm-6">
                      <div class="product-grid">
                          <div class="product-image">
                              <a href="#" class="image">
                                  <img class="pic-1" src="images/img-1.jpg">
                              </a>
                              <span class="product-new-label">new</span>
                              <ul class="social">
                                  <li><a href="" data-tip="Quick view"><i class="fas fa-search"></i></a></li>
                                  <li><a href="" data-tip="Add to Wishlist"><i class="far fa-heart"></i></a></li>
                                  <li><a href="" data-tip="Compare"><i class="fas fa-random"></i></a></li>
                              </ul>
                          </div>
                          <div class="product-content">
                              <h3 class="title"><a href="#">Women's Blouse Top</a></h3>
                              <div class="price">$18.50</div>
                              <ul class="rating">
                                  <li class="fas fa-star"></li>
                                  <li class="fas fa-star"></li>
                                  <li class="fas fa-star"></li>
                                  <li class="fas fa-star"></li>
                                  <li class="far fa-star"></li>
                              </ul>
                              <a class="add-to-cart" href="#">
                                 <i class="fas fa-shopping-cart"></i> <span>ADD TO CART</span>
                              </a>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                      <div class="product-grid">
                          <div class="product-image">
                              <a href="#" class="image">
                                  <img class="pic-1" src="images/img-2.jpg">
                              </a>
                              <span class="product-new-label">new</span>
                              <ul class="social">
                                  <li><a href="" data-tip="Quick view"><i class="fas fa-search"></i></a></li>
                                  <li><a href="" data-tip="Add to Wishlist"><i class="far fa-heart"></i></a></li>
                                  <li><a href="" data-tip="Compare"><i class="fas fa-random"></i></a></li>
                              </ul>
                          </div>
                          <div class="product-content">
                              <h3 class="title"><a href="#">Men'
            s jacket</a></h3>
                              <div class="price"><span>$30.00</span>$20.00</div>
                              <ul class="rating">
                                  <li class="fas fa-star"></li>
                                  <li class="fas fa-star"></li>
                                  <li class="fas fa-star"></li>
                                  <li class="far fa-star"></li>
                                  <li class="far fa-star"></li>
                              </ul>
                              <a class="add-to-cart" href="#">
                                 <i class="fas fa-shopping-cart"></i> <span>ADD TO CART</span>
                              </a>
                          </div>
                      </div>
                  </div>
              </div>

            CSS样式

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            62
            63
            64
            65
            66
            67
            68
            69
            70
            71
            72
            73
            74
            75
            76
            77
            78
            79
            80
            81
            82
            83
            84
            85
            86
            87
            88
            89
            90
            91
            92
            93
            94
            95
            96
            97
            98
            99
            100
            101
            102
            103
            104
            105
            106
            107
            108
            109
            110
            111
            112
            113
            114
            115
            116
            117
            118
            119
            120
            121
            122
            123
            124
            125
            126
            127
            128
            129
            130
            131
            132
            133
            134
            135
            136
            137
            138
            139
            140
            141
            142
            143
            144
            145
            146
            147
            148
            149
            150
            151
            152
            .product-grid{
                font-family: 'Open Sans', sans-serif;
                text-align: center;
            }
            .product-grid .product-image{
                position: relative;
                overflow: hidden;
            }
            .product-grid .product-image a.image{ display: block; }
            .product-grid .product-image img{
                width: 100%;
                height: auto;
                transition: all 0.3s;
            }
            .product-grid .product-image:hover img{ transform: scale(1.05); }
            .product-grid .product-new-label{
                color: #fff;
               background: #cd1b29;
               font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
                padding: 3px 10px 10px;
                position: absolute;
                top: 0px;
                left: 0;
                clip-path: polygon(0 0, 100% 0, 100% 75%, 15% 75%, 0 100%, 0% 25%);
            }
            .product-grid .social{
                padding: 0;
                margin: 0;
                list-style: none;
                opacity: 0;
                transform: translateY(-50%);
                position: absolute;
                top:50%;
                left: -50px;
                transition: all 0.3s ease;
            }
            .product-grid .product-image:hover .social{
                opacity: