Animated Shopping Cart Icons

Developer
Joni Trythall
Size
7,610 Kb
Views
12,144
  1. Animated Shopping Cart Icons Previews
  2. Animated Shopping Cart Icons HTML Codes
  3. Animated Shopping Cart Icons CSS Codes
  4. Animated Shopping Cart Icons JS Codes

How do I make an animated shopping cart icons?

Just experimenting with some SVG animations and interactivity for a "Fake Fruit Shop". Chrome only for now. . What is a animated shopping cart icons? How do you make a animated shopping cart icons? This script and codes were developed by Joni Trythall on 29 September 2022, Thursday.

Animated Shopping Cart Icons Previews
IQ Test

Animated Shopping Cart Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Shopping Cart Icons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Nunito:400' rel='stylesheet' type='text/css'>
<header> <img class="shop-sign"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/headerpic.svg" alt="Fake Fruit Shop Sign" />
</header> <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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/apple.svg" alt="Apple Icon" /> </a> <a href="#" class="contain-icon icon-hook"> <img class="lime-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/dashes.svg" alt="Motion Lines" /> <img class="watermelon-truck" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/watermelon.svg" alt"Watermelon Icon" /> <span class="text truck-text">Ground Shipping</span> </a> </div> </div> <footer> <div class="contain-footer-info"> <span class="made-with">Made with</span> <svg class="by-heart" version="1.1" width="50px" height="34px" viewBox="0 0 90.65 85.04"> <path class="by-heart-path" fill="none" stroke="#ea6b46" 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> <span class="by">by<a href="http://jonibologna.com/" class="byline">Joni Trythall</a></span> </div> </footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Shopping Cart Icons - Script Codes CSS Codes

/* Basic Styling */
header { background: #e3da74; width: 100%; height: 300px;
}
.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: 150px; } footer .byline { display: block; margin-right: 0; } .contain-icon:last-of-type { margin-right: 0; }
}

Animated Shopping Cart Icons - Script Codes JS Codes

// Chrome only for now
// Get a list of all svg elements
icons = document.querySelectorAll('.icon-hook');
// Cycle through list
for (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);
}
Animated Shopping Cart Icons - Script Codes
Animated Shopping Cart Icons - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded September 29, 2022
Rating 4.5
Size 7,610 Kb
Views 12,144
Do you need developer help for Animated Shopping Cart Icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joni Trythall (jonitrythall) Script Codes
Name
Rainbow Loader
Franklin The CSS Fish
CSS Alarm Clock
Unite Loader
Weird Circle Loader
Frosted Glass Quote
Floated Image Link Issue
Meat Selection
Simple CSS Flag
SVG Loaders
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!