图片/图形

CSS3购物商品卡片设计动画特效

创客主机


这是一款效果非常炫酷的CSS3购物商品卡片设计动画特效。该特效采用响应式网格布局,通过CSS3在鼠标悬停卡片时切换图片,制作炫酷的动画效果。

使用方法

在页面中引入下面的bootstrap.min.css和font-awesome.min.css文件。

  1. <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  2. <link rel="stylesheet" type="text/css" href="font-awesome.min.css" />

HTML结构

基本的HTML DOM元素结构如下:

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-3 col-sm-6">
  4.             <div class="product-grid">
  5.                 <div class="product-image">
  6.                     <a href="#">
  7.                         <img class="pic-1" src="images/img-1.jpg">
  8.                         <img class="pic-2" src="images/img-2.jpg">
  9.                     </a>
  10.                     <span class="product-trend-label">Trend</span>
  11.                     <ul class="social">
  12.                         <li><a href="#" data-tip="Add to Cart"><i class="fas fa-shopping-cart"></i></a></li>
  13.                         <li><a href="#" data-tip="Wishlist"><i class="far fa-heart"></i></a></li>
  14.                         <li><a href="#" data-tip="Compare"><i class="fas fa-random"></i></a></li>
  15.                         <li><a href="#" data-tip="Quick View"><i class="fas fa-search"></i></a></li>
  16.                     </ul>
  17.                 </div>
  18.                 <div class="product-content">
  19.                     <h3 class="title"><a href="#">Men's Blazer</a></h3>
  20.                     <div class="price">$21.00</div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.         <div class="col-md-3 col-sm-6">
  25.             <div class="product-grid">
  26.                 <div class="product-image">
  27.                     <a href="#">
  28.                         <img class="pic-1" src="images/img-3.jpg">
  29.                         <img class="pic-2" src="images/img-4.jpg">
  30.                     </a>
  31.                     <span class="product-trend-label">Trend</span>
  32.                     <span class="product-discount-label">-20%</span>
  33.                     <ul class="social">
  34.                         <li><a href="#" data-tip="Add to Cart"><i class="fas fa-shopping-cart"></i></a></li>
  35.                         <li><a href="#" data-tip="Wishlist"><i class="far fa-heart"></i></a></li>
  36.                         <li><a href="#" data-tip="Compare"><i class="fas fa-random"></i></a></li>
  37.                         <li><a href="#" data-tip="Quick View"><i class="fas fa-search"></i></a></li>
  38.                     </ul>
  39.                 </div>
  40.                 <div class="product-content">
  41.                     <h3 class="title"><a href="#">Women's Button Top</a></h3>
  42.                     <div class="price discount"><span>$17.00</span> $13.60</div>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </div>
  47. </div>

CSS样式

然后通过下面的CSS样式来制作鼠标悬停动画和tooltip效果。

  1. .product-grid{
  2.     font-family: 'Roboto', sans-serif;
  3.     position: relative;
  4. }
  5. .product-grid .product-image{
  6.     overflow: hidden;
  7.     position: relative;
  8. }
  9. .product-grid .product-image:before{
  10.     content: "";
  11.     background: rgba(0,0,0,0.3);
  12.     width: 100%;
  13.     height: 100%;
  14.     opacity: 0;
  15.     position: absolute;
  16.     top: 0;
  17.     left: 0;
  18.     z-index: 1;
  19.     transition: all 0.4s ease-out 0s;
  20. }
  21. .product-grid:hover .product-image:before{ opacity: 1; }
  22. .product-grid .product-image a{ display: block; }
  23. .product-grid .product-image img{
  24.     width: 100%;
  25.     height: auto;
  26. }
  27. .product-image .pic-1{
  28.     opacity: 1;
  29.     backface-visibility: hidden;
  30.     transition: all 0.4s ease-out 0s;
  31. }
  32. .product-grid:hover .product-image .pic-1{ opacity: 0; }
  33. .product-image .pic-2{
  34.     width: 100%;
  35.     height: 100%;
  36.     opacity: 0;
  37.     backface-visibility: hidden;
  38.     transform: scale(3);
  39.     position: absolute;
  40.     top: 0;
  41.     left: 0;
  42.     transition: all 0.4s ease-out 0s;
  43. }
  44. .product-grid:hover .product-image .pic-2 {
  45.     opacity: 1;
  46.     transform: scale(1);
  47. }
  48. .product-image .product-trend-label,
  49. .product-image .product-discount-label{
  50.     content: "";
  51.     color: #fff;
  52.     background-color: #2ecc71;
  53.     font-size: 12px;
  54.     line-height: 28px;
  55.     font-weight: 700;
  56.     text-align: center;
  57.     text-transform: uppercase;
  58.     padding: 0 7px;
  59.     position: absolute;
  60.     top: 12px;
  61.     left: 12px;
  62.     z-index: 3;
  63. }
  64. .product-image .product-discount-label{
  65.     background-color: #e74c3c;;
  66.     left: auto;
  67.     right: 12px;
  68. }
  69. .product-grid .social {
  70.     padding: 0;
  71.     margin: 0;
  72.     list-style: none;
  73.     transform: translateY(-50%);
  74.     position: absolute;
  75.     top: 50%;
  76.     left: 10px;
  77.     z-index: 4;
  78. }
  79. .product-grid .social li {
  80.     margin: 0 0 12px;
  81.     opacity: 0;
  82.     transform: translateX(-60px);
  83.     transition: transform .3s ease-out 0s;
  84. }
  85. .product-grid:hover .social li {
  86.     opacity: 1;
  87.     transform: translateX(0);
  88. }
  89. .product-grid:hover .social li:nth-child(2){ transition-delay: 0.1s; }
  90. .product-grid:hover .social li:nth-child(3){ transition-delay: 0.2s; }
  91. .product-grid:hover .social li:nth-child(4){ transition-delay: 0.3s; }
  92. .product-grid .social li a {
  93.     color: #fff;
  94.     font-size: 22px;
  95.     transition: all 0.3s;
  96. }
  97. .product-grid .social li a:hover { color: #e74c3c;; }
  98. .product-grid .social li a:before,
  99.  .product-grid .social li a:after{
  100.     content: attr(data-tip);
  101.     color: #000;
  102.     background: #fff;
  103.     font-size: 14px;
  104.     padding: 5px 10px;
  105.     white-space: nowrap;
  106.     display: none;
  107.     transform: translateY(-50%);
  108.     position: absolute;
  109.     left: 33px;
  110.     top: 50%;
  111.     transition: all 0.3s;
  112. }
  113. .product-grid .social li a:after{
  114.     content: '';
  115.     background: linear-gradient(-45deg, #fff 49%, transparent 50%);
  116.     width: 10px;
  117.     height: 10px;
  118.     top: 40%;
  119.     left: 20px;
  120. }
  121. .product-grid .social li a:hover:before,
  122. .product-grid .social li a:hover:after{
  123.       display: block;
  124. }
  125. .product-grid .product-content{ padding: 12px 0; }
  126. .product-grid .title{
  127.     font-size: 15px;
  128.     font-weight: 400;
  129.     text-transform: capitalize;
  130.     margin: 0 0 5px;
  131. }
  132. .product-grid .title a{ color: #959595; }
  133. .product-grid .title a:hover{ color: #e74c3c;; }
  134. .product-grid .price{
  135.     color: #333;
  136.     font-size: 14px;
  137.     font-weight: 400;
  138. }
  139. .product-grid .price span{
  140.     color: #333;
  141.     text-decoration: line-through;
  142.     margin-right: 3px;
  143. }
  144. .product-grid .price.discount{ color: #e74c3c;; }
  145. @media only screen and (max-width:990px){
  146.     .product-grid{ margin-bottom: 30px; }
  147. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!