html5 svg点击购物车图标动态特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 svg点击购物车图标动态特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 svg点击购物车图标动态效果</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

  <div class="demo demo-1">
    <div class="contain-all">
      <a href="#" class="contain-icon icon-hook">
        <!--Begin First Cart Icon-->
        <svg class="cart-icon-1" version="1.1" width="150px" height="150px" viewBox="0 0 90.156 89.89">
          <path class="main-path" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504
          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273
          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218  c0.275,0.12,0.5,1.664,0.5,2.773V55.639z"/>
          <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="30.863" y1="20.74" x2="30.863" y2="58.63"/>
          <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="46.837" y1="20.74" x2="46.837" y2="58.63"/>
          <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="33.308" x2="61.24" y2="33.308"/>
          <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="46.285" x2="61.125" y2="46.285"/>
          <circle class="wheel" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.442" cy="64.554" r="5.924"/>
          <circle class="wheel" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="53.314" cy="64.554" r="5.924"/>
          <path class="outer-plus-1" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M67.378,52.665
          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843
          c-7.378-0.815-13.212-6.001-15.21-12.692"/>
          <path class="cart-plus-1" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.516,70.556h17.695 M70.364,61.708v17.695"/>
          <path class="check-1" fill="none" stroke="#7aa23f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M60.207,73.377l6.817,6.817 M81.273,64.554l-14.249,15.64"/>
        </svg>
        <!--End First Cart Icon-->
        <img class="apple-1" src="images/apple.svg" alt="Apple Icon" />
      </a>

      <a href="#" class="contain-icon icon-hook">
        <img class="lime-1" src="images/lime.svg" alt="Lime Icon" />
        <!--Begin Second Cart Icon-->
        <svg class="cart-icon-2" version="1.1" width="150px" height="150px" viewBox="0 0 90.156 89.89">
          <path class="main-path" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504
          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273
          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z"/>
          <line class="center-line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="30.863" y1="20.74" x2="30.863" y2="58.63"/>
          <line class="center-line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="46.837" y1="20.74" x2="46.837" y2="58.63"/>
          <line class="center-line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="33.308" x2="61.24" y2="33.308"/>
          <line class="center-line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="46.285" x2="61.125" y2="46.285"/>
          <circle class="wheel" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.442" cy="64.554" r="5.924"/>
          <circle class="wheel" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="53.314" cy="64.554" r="5.924"/>
          <path class="outer-plus-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M67.378,52.665
          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843
          c-7.378-0.815-13.212-6.001-15.21-12.692"/>
          <path class="cart-plus-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.516,70.556h17.695 M70.364,61.708v17.695"/>
        </svg>
        <!--End Second Cart Icon-->    
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Third Cart Icon-->
        <svg class="cart-icon-3" version="1.1" width="150px" height="150px" viewBox="0 0 90.156 89.89">
          <path class="main-path-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504
          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273
          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z"/>
          <line class="center-line-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="30.863" y1="20.74" x2="30.863" y2="58.63"/>
          <line class="center-line-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="46.837" y1="20.74" x2="46.837" y2="58.63"/>
          <line class="center-line-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="33.308" x2="61.24" y2="33.308"/>
          <line class="center-line-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="15.973" y1="46.285" x2="61.125" y2="46.285"/>
          <circle class="wheel-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.442" cy="64.554" r="5.924"/>
          <circle class="wheel-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="53.314" cy="64.554" r="5.924"/>
          <path class="outer-plus-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M67.378,52.665
          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843
          c-7.378-0.815-13.212-6.001-15.21-12.692"/>
          <path class="cart-plus-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.516,70.556h17.695 M70.364,61.708v17.695"/>
          </svg>
        <!--End Third Cart Icon-->
        <div class="one">1</div>
      </a>
    </div>
  </div>

  <div class="demo demo-2">
    <div class="contain-all">
      <a href="#" class="contain-icon icon-hook">
      <!--Begin First Star Icon-->
        <svg class="star-icon star-icon-1" version="1.1" width="103px" height="103px" viewBox="0 0 105.602 102.931">
          <path class="main-star-1" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10" d="M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754
          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413
          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287
          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z"/>
          <path class="star-dashes-1" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M20.881,6.26
          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204"/>
          <path class="star-check-1" fill="none" stroke="#f9f706" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64"/>
        </svg>
        <!--End First Star Icon-->
        <span class="text save-text">Save for Later</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Second Star Icon-->
        <svg class="star-icon star-icon-2" version="1.1" width="106px" height="103px" viewBox="0 0 105.602 102.931">
          <path class="main-star-2" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10" d="M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754
          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413
          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287
          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z"/>
          <path class="star-dashes-2" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M20.881,6.26
          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204"/>
          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64"/>
        </svg>
        <!--End Second Star Icon-->
        <span class="text save-text">Save for Later</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Third Star Icon-->
        <svg class="star-icon star-icon-3" version="1.1" width="106px" height="103px" viewBox="0 0 105.602 102.931">
          <path class="main-star-3" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10" d="M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754
          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413
          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287
          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z"/>
          <path class="main-star-4" fill="none" stroke="#f9f706" stroke-width="6" stroke-miterlimit="10" d="M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754
          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413
          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287
          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z"/>
        </svg>
        <!--End Third Star Icon-->
        <span class="text save-text">Save for Later</span>
      </a>
    </div>
  </div>

  <div class="demo demo-3">
    <div class="contain-all">
      <a href="#" class="contain-icon icon-hook">
        <!--Begin First Gift Icon-->
        <svg class="box-icon box-icon-1" version="1.1" width="74px" height="89px" viewBox="0 0 74.479 89.141">
          <path class="box-bottom-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M67.874,84.885
          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z"/>
          <path class="box-top-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M72.354,41.018
          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849
          c0.655,0,1.191,0.536,1.191,1.191V41.018z"/>
          <path class="bow-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091
          c3.113,8.734,14.479,10.773,22.678,10.773"/>
          <path class="bow-1 bow-1-right" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091
          c-3.113,8.734-14.479,10.773-22.678,10.773"/>
        </svg>
        <!--End First Gift Icon-->
        <span class="text gift-text">This is a Gift</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
      <!--Begin Gift Star Icon-->
        <svg class="box-icon box-icon-2" version="1.1" width="74px" height="89px" viewBox="0 0 74.479 89.141">
          <path class="box-bottom-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M67.874,84.885
          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z"/>
          <path class="box-top-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M72.354,41.018
          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z"/>
          <path class="bow-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091 c3.113,8.734,14.479,10.773,22.678,10.773"/>
          <path class="bow-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091
          c-3.113,8.734-14.479,10.773-22.678,10.773"/>
        </svg>
        <!--End Second Gift Icon-->
        <img class="lemon-gift-2" src="images/lemon.svg" alt="Lemon Icon" />
        <span class="text gift-text">This is a Gift</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Third Gift Icon-->
        <svg class="box-icon box-icon-3" version="1.1" width="74px" height="89px" viewBox="0 0 74.479 89.141">
          <path class="box-bottom-3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M67.874,84.885
          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z"/>
          <path class="box-top-3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M72.354,41.018
          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z"/>
          <path class="bow-3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091   c3.113,8.734,14.479,10.773,22.678,10.773"/>
          <path class="bow-3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091
          c-3.113,8.734-14.479,10.773-22.678,10.773"/>
        </svg>
        <!--End Third Gift Icon-->
        <img class="lime-2" src="images/lime.svg" alt="Lime Icon" />
        <span class="text gift-text">This is a Gift</span>
      </a>
    </div>
  </div>

  <div class="demo demo-4">
    <div class="contain-all">
      <a href="#" class="contain-icon icon-hook">
        <!--Begin First Favorite Icon-->
        <svg class="heart-icon heart-icon-1" version="1.1" width="91px" height="85px" viewBox="0 0 90.65 85.04">
          <path class="heart-1" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041
          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522"/>
          <circle class="loader-1 loader-1-l" fill="#ec6d46" stroke="none" stroke-miterlimit="10" cx="25.173" cy="39.773" r="5.014"/>
          <circle class="loader-1 loader-1-r" fill="#ec6d46" stroke="none" stroke-miterlimit="10" cx="65.477" cy="39.773" r="5.014"/>
          <circle class="loader-1 loader-1-m" fill="#ec6d46" stroke="none" stroke-miterlimit="10" cx="45.325" cy="39.773" r="5.014"/>
        </svg>
        <!--End First Favorite Icon-->  
        <span class="text favorite-text">Add to Favorites</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Second Favorite Icon-->
        <svg class="heart-icon heart-icon-2" version="1.1" width="91px" height="85px" viewBox="0 0 90.65 85.04">
          <path class="heart-2" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041
          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522"/> 
        </svg>        
        <!--End Second Favorite Icon-->    
        <span class="text favorite-text">Add to Favorites</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Third Favorite Icon-->
        <svg class="heart-icon heart-icon-3" version="1.1" width="91px" height="85px" viewBox="0 0 90.65 85.04">
          <path class="heart-3" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041
          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522"/>
        </svg>
        <!--End Third Favorite Icon-->  
        <span class="text favorite-text">Add to Favorites</span>
      </a>

    </div>
  </div>

  <div class="demo demo-5">
    <div class="contain-all">
      <a href="#" class="contain-icon icon-hook">
        <!--Begin First Truck Icon-->
        <svg class="truck-icon" version="1.1" width="133px" height="111px" viewBox="0 0 96.71 73.53">
          <path class="truck-back-1" fill="#e3da74" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695  h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z"/>
          <line class="truck-base-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="93.414" y1="51.539" x2="3.296" y2="51.539"/>
          <path class="truck-cab-1" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833  c0.574,1.163,1.043,3.175,1.043,4.472v23.091"/>
          <circle class="tire-1" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="18.239" cy="61.542" r="9.14"/>
          <path class="tire-plus-1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628"/>
          <circle class="tire-1" class="tire" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="77.247" cy="61.542" r="9.14"/>
          <path class="tire-plus-1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628"/>
          <path class="window-1" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695 h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z"/>
        </svg>
        <!--End First Truck Icon-->
        <img class="inside-truck" src="images/insidetruck.svg" alt="Orange Inside Truck" />
        <span class="text truck-text">Ground Shipping</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Second Truck Icon-->
        <svg class="truck-icon" version="1.1" width="133px" height="111px" viewBox="0 0 96.71 73.53">
          <path class="truck-back-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695 h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z"/>
          <line class="truck-base-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="93.414" y1="51.539" x2="3.296" y2="51.539"/>
          <path class="truck-cab-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091"/>
          <circle class="tire-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="18.239" cy="61.542" r="9.14"/>
          <path class="tire-plus-2" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628"/>
          <circle class="tire-2" class="tire" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="77.247" cy="61.542" r="9.14"/>
          <path class="tire-plus-2" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628"/>
          <path class="window-2" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695      h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z"/>
        </svg>
        <!--End Second Truck Icon-->
        <img class="truck-grapes" src="images/grapes.svg" alt="Grapes Icon" />
        <span class="text truck-text">Ground Shipping</span>
      </a>

      <a href="#" class="contain-icon icon-hook">
        <!--Begin Third Truck Icon-->
        <svg class="truck-icon" version="1.1" width="133px" height="111px" viewBox="0 0 96.71 73.53">
          <path class="truck-back-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695   h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z"/>
          <line class="truck-base-3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="93.414" y1="51.539" x2="3.296" y2="51.539"/>
          <path class="truck-cab-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091"/>
          <circle class="tire-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="18.239" cy="61.542" r="9.14"/>
          <path class="tire-plus-3" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628"/>
          <circle class="tire-3" class="tire" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="77.247" cy="61.542" r="9.14"/>
          <path class="tire-plus-3" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628"/>
          <path class="window-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695       h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z"/>
        </svg>
        <!--End Third Truck Icon-->
        <img class="dashes" src="images/dashes.svg" alt="Motion Lines" />
        <img class="watermelon-truck" src="images/watermelon.svg" alt"Watermelon Icon" />
        <span class="text truck-text">亲，您的商品正在送货中。</span>
      </a>
    </div>
  </div>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

// Chrome only for now// Get a list of all svg elementsicons = document.querySelectorAll('.icon-hook');
	// Cycle through listfor (var i = 0;
	i < icons.length;
	i++){
	icons[i].addEventListener('click',function(event){
	event.preventDefault();
	var icon = this;
	var currentClass = icon.getAttribute('class');
	// The starting class console.log(icon);
	if (currentClass.indexOf('active') > -1){
	// Remove .active icon.setAttribute('class',currentClass.replace(' active',''));
}
else{
	// Add .active icon.setAttribute('class',currentClass + ' active');
}
}
,false);
}

CSS代码(style.css):

/* Basic Styling */
body{margin:0}
.shop-sign{position:absolute;left:50%;margin-left:-190px;margin-top:50px;width:380px;}
.demo{position:relative;font-family:'Nunito',sans-serif;color:white;width:100%;height:650px;}
.contain-all{margin:auto;width:150px;}
a{position:relative;display:block;margin:auto;padding-top:50px;text-decoration:none;color:white;width:150px;height:150px;}
a:visited{text-decoration:none;color:inherit;}
a:active{text-decoration:none;color:inherit;}
.icon-hook{position:relative;}
.icon-hook:after{content:"";top:0;left:0;width:100%;height:100%;}
.icon-hook > svg{pointer-events:none;}
.contain-card{padding-top:75px;height:350px;}
.demo-1{background:#e3da74;}
.demo-2{background:#b2c460;}
.demo-3{background:#f69159;}
.demo-4{background:#fcab54;}
.demo-5{background:#e3da74;}
svg{position:absolute;z-index:5;}
.text{position:absolute;font-size:20px;font-weight:bold;}
.save-text{top:140px;}
.gift-text{top:150px;left:2px;}
.favorite-text{top:160px;left:-15px;width:180px;}
.truck-text{top:170px;left:-20px;width:180px;}
footer{position:relative;background:#e3da74;height:250px;font-family:'Nunito',sans-serif;color:white;font-size:18px;}
.by-heart{position:absolute;top:-2px;}
.by{margin-left:55px;}
.byline{position:absolute;top:35px;left:120px;padding:0;margin:0;height:20px;}
.byline:hover{color:#fcab54;}
.contain-footer-info{position:absolute;top:100px;left:50%;margin-left:-200px;text-align:center;width:400px;height:50px;}
/* Cart Demo 1 */
.check-1{opacity:0;-webkit-transform-origin:center;}
.apple-1{position:absolute;opacity:0;top:30px;left:42px;width:45px;-webkit-transform:rotate(-40deg);}
.active .apple-1{-webkit-animation:add-apple-1 2s forwards;}
.active .cart-plus-1{-webkit-animation:added 1s forwards;}
.active .check-1{-webkit-animation:checked 1s forwards;}
@-webkit-keyframes add-apple-1{50%{opacity:1;}
to{-webkit-transform:translateY(57px);opacity:1;}
}
@-webkit-keyframes added{1%{opacity:0;}
100%{opacity:0;}
}
@-webkit-keyframes checked{50%{opacity:1;-webkit-transform:scale(1.5);}
100%{opacity:1;}
}
/* Cart Demo 2 */
.cart-2{padding-top:50px;}
.lime-1{position:absolute;top:96px;left:37px;-webkit-transform:rotate(-20deg);opacity:0;width:55px;}
.center-line{stroke-dasharray:50;}
.check-2{opacity:0;}
.active .center-line{-webkit-animation:draw-cart 3s forwards;}
.active .lime-1{-webkit-animation:lime-appear 1s 1s forwards;}
.active .cart-plus-2{stroke:#7aa23f;}
@-webkit-keyframes lime-appear{50%{opacity:1;-webkit-transform:scale(.5);}
100%{opacity:1;}
}
@-webkit-keyframes draw-cart{0%{stroke-dashoffset:0;}
25%{stroke-dashoffset:50;}
50%{stroke-dashoffset:50;}
75%{stroke-dashoffset:50;}
100%{stroke-dashoffset:0;}
}
/* Cart Demo 3 */
.one{position:absolute;top:65px;left:47px;color:#ef9234;font-size:55px;opacity:0;-webkit-transform:scale(.1) rotate(260deg);}
.center-line-3{stroke-dasharray:50;}
.active .center-line-3{-webkit-animation:remove-middle 1s forwards;}
.active .one{-webkit-animation:count 1500ms 500ms forwards;}
.active .cart-plus-3{stroke:#7aa23f;}
@-webkit-keyframes count{50%{opacity:1;-webkit-transform:translateY(-45px);}
100%{opacity:1;-webkit-transform:translateY(15px);}
}
@-webkit-keyframes remove-middle{to{stroke-dashoffset:50;}
}
/* Save Demo 1 */
.star-icon{left:25px;width:80px;}
.star-dashes-1{opacity:0;}
.star-check-1{opacity:1;stroke-dasharray:22;stroke-dashoffset:22;}
.active .star-dashes-1{-webkit-animation:flash-1 1s forwards;}
.active .star-check-1{-webkit-animation:star-checked-1 1s forwards;}
@-webkit-keyframes flash-1{50%{opacity:1;}
}
@-webkit-keyframes star-checked-1{50%{stroke-dashoffset:0;}
75%{stroke-dashoffset:0;-webkit-transform-origin:center;-webkit-transform:rotate(360deg) scale(1.5);}
100%{stroke-dashoffset:0;}
}
/* Save Demo 2 */
.star-dashes-2{opacity:0;-webkit-transform-origin:center;-webkit-transform:scale(.5);}
.active .star-dashes-2{-webkit-animation:dashes-2 2s forwards;}
.active .main-star-2{fill:yellow;-webkit-transform:rotate(360deg);}
@-webkit-keyframes dashes-2{50%{opacity:1;stroke:#f9f706;-webkit-transform:rotate(360deg);}
}
/* Save Demo 3 */
.main-star-4{z-index:10;stroke-dasharray:310;stroke-dashoffset:310;}
.active .main-star-4{-webkit-animation:draw-star-3 2s forwards;fill:#f9f706;}
@-webkit-keyframes draw-star-3{50%{stroke-dashoffset:0;}
}
/* Gift Demo 1 */
.box-icon{left:30px;}
.bow-1{stroke-dasharray:140;stroke-dashoffset:-140;}
.bow-1-right{stroke-dashoffset:140;}
.active .bow-1{-webkit-animation:draw-bow-1 1s forwards;}
.active .bow-1-right{-webkit-animation:draw-bow-1 1s 1s forwards;}
@-webkit-keyframes draw-bow-1{1%{opacity:1;}
100%{stroke-dashoffset:0;}
}
/* Gift Demo 2 */
.bow-2{opacity:0;stroke-dasharray:140;stroke-dashoffset:140;}
.lemon-gift-2{position:absolute;top:97px;left:42px;-webkit-tranform-origin:center;-webkit-transform:scale(.5) rotate(-180deg);opacity:0;width:50px;}
.active .box-top-2{-webkit-animation:open-2 2s forwards;}
.active .lemon-gift-2{-webkit-animation:lemon-appear-2 1s 500ms forwards;}
.active .bow-2{-webkit-animation:draw-bow-2 1s 2s forwards;}
@-webkit-keyframes draw-bow-2{1%{opacity:1;}
100%{opacity:1;stroke-dashoffset:0;}
}
@-webkit-keyframes open-2{50%{-webkit-transform:translateY(-25px);}
}
@-webkit-keyframes lemon-appear-2{to{opacity:1;-webkit-transform:rotate(-20deg) scale(1);}
}
/* Gift Demo 3 */
.bow-3{opacity:0;stroke-dasharray:140;stroke-dashoffset:-140;}
.lime-2{position:absolute;top:98px;left:43px;-webkit-transform:rotate(-20deg);opacity:0;width:48px;}
.active .box-icon-3{-webkit-animation:expand-gift 1s 1s forwards;}
.active .lime-2{-webkit-animation:show-lime 1s forwards,expand-gift 1s 1s forwards;}
.active .bow-3{-webkit-animation:draw-bow-3 1s 1s forwards;}
@-webkit-keyframes show-lime{to{opacity:1;}
}
@-webkit-keyframes draw-bow-3{1%{opacity:1;}
100%{opacity:1;stroke-dashoffset:0;}
}
@-webkit-keyframes expand-gift{50%{-webkit-transform:scale(1.2);}
}
/* Favorites Demo 1 */
.heart-icon{top:75px;left:22px;}
.loader-1{opacity:0;-webkit-transform:scale(.3);}
.active .heart-1{-webkit-transform-origin:center;-webkit-animation:grow-heart 500ms 2s forwards;stroke:#ec6d46;}
.active .loader-1-l{-webkit-animation:load-1 500ms 500ms forwards;}
.active .loader-1-m{-webkit-animation:load-1 500ms 1s forwards;}
.active .loader-1-r{-webkit-animation:load-1 500ms 1500ms forwards;}
@-webkit-keyframes load-1{50%{opacity:1;-webkit-transform-origin:center;-webkit-transform:scale(2);}
}
@-webkit-keyframes grow-heart{50%{-webkit-transform:scale(.3);}
}
/* Favorites Demo 2 */
.heart-2{-webkit-transform-origin:bottom;transition:stroke 1s 1s ease;}
.active .heart-2{-webkit-animation:heart-beat 1s forwards;stroke:#ec6d46;}
@-webkit-keyframes heart-beat{25%{-webkit-transform:scale(.3);}
50%{-webkit-transform:scale(1);}
75%{-webkit-transform:scale(.3);}
100%{-webkit-transform:scale(1);}
}
/* Favorites Demo 3 */
.heart-3{-webkit-transform-origin:center;stroke-dasharray:135;}
.active .heart-3{-webkit-animation:draw-heart-3 2s forwards;stroke:#ec6d46;}
@-webkit-keyframes draw-heart-3{0%{stroke-dashoffset:-135;-webkit-transform:scale(.2) rotate(-280deg);}
30%{stroke-dashoffset:135;-webkit-transform:scale(.4) rotate(280deg);}
60%{stroke-dashoffset:-135;-webkit-transform:scale(.6);}
100%{stroke-dashoffset:0;stroke:#ec6d46;}
}
/* Truck Icon Demo 1 */
.truck-icon{top:60px;}
.inside-truck{position:absolute;top:67px;left:2px;width:77px;}
.active .truck-back-1{-webkit-transform-origin:center;-webkit-animation:truck-flip 2s forwards,add-orange 1s 1s forwards;}
.active .inside-truck{-webkit-transform-origin:center;-webkit-animation:truck-flip 2s forwards;}
.active .tire-plus-1{-webkit-animation:turn-plus 1s 500ms forwards;stroke:#7aa23f;}
@-webkit-keyframes turn-plus{50%{-webkit-transform-origin:center;-webkit-transform:scale(1.5);}
100%{-webkit-transform-origin:center;-webkit-transform:rotate(45deg);}
}
@-webkit-keyframes truck-flip{50%{-webkit-transform:scale(.7);}
100%{-webkit-transform:scale(1) rotateY(180deg);}
}
@-webkit-keyframes add-orange{to{fill:none;stroke:none;}
}
/* Truck Icon Demo 2 */
.truck-grapes{position:absolute;top:67px;left:20px;-webkit-transform-origin:center;-webkit-transform:scale(.2);opacity:0;width:40px;}
.active .truck-grapes{-webkit-animation:add-truck-grapes 2s forwards;}
.active .tire-plus-2{-webkit-transform-origin:center;-webkit-animation:drive-plus 1s forwards,enlarge-plus-2 1s 1s forwards;stroke:#7aa23f;}
.active .tire-2{-webkit-transform-origin:center;-webkit-animation:enlarge-plus-2 1s 1s forwards;stroke:#7aa23f;}
@-webkit-keyframes drive-plus{1%{-webkit-transform:rotate(-20000deg);}
}
@-webkit-keyframes enlarge-plus-2{50%{-webkit-transform:rotate(45deg) scale(1.5);}
100%{-webkit-transform:rotate(45deg);}
}
@-webkit-keyframes add-truck-grapes{1%{opacity:1;}
75%{opacity:1;-webkit-transform:scale(1.2) rotate(260deg);}
100%{opacity:1;-webkit-transform:scale(1) rotate(300deg);}
}
/* Truck Icon Demo 3 */
.dashes{position:absolute;top:100px;left:-50px;opacity:0;width:40px;}
.watermelon-truck{position:absolute;top:60px;left:6px;z-index:5;-webkit-transform:rotateX(90deg);width:70px;}
.active .watermelon-truck{-webkit-animation:add-melon 1s forwards;}
.active .dashes{-webkit-animation:fast 1s 500ms forwards;}
.active .tire-plus-3{-webkit-transform-origin:center;-webkit-animation:drive-3 1500ms 500ms forwards;stroke:#7aa23f;}
@-webkit-keyframes drive-3{100%{-webkit-transform:rotate(45deg);}
}
@-webkit-keyframes fast{to{opacity:1;}
}
@-webkit-keyframes add-melon{to{-webkit-transform:rotateX(360deg);}
}
/* Footer Heart */
.by-heart-path{stroke-dasharray:7;-webkit-animation:move-heart 1s infinite;}
@-webkit-keyframes move-heart{50%{stroke-dashoffset:40;}
}
/* Media query for layout */
@media (min-width:800px){.demo{height:250px;}
.contain-all{margin:auto;width:765px;}
a{display:inline-block;margin-right:140px;}
footer .byline{display:block;margin-right:0;}
.contain-icon:last-of-type{margin-right:0;}
}

附件:下载该文件资源,减少时间成本(增值服务)