Fistbump 🤜💥🤛 Efecto de golpear con los puños con SVG & CSS

07 January 2022
Responsive,
SVG,
100Snippets

<style>
.fistbump {
  display: inline-block;
  justify-content: center;
  align-items: center;
  padding: 3px 6px 9px 6px;
  border-radius: 999px;
  transform: scale(2);
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

svg path {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: black;
}
svg path.fl {
  transform: translateX(0);
}
svg path.fr {
  transform: translateX(0);
}
svg path.bm {
  stroke-dasharray: 3;
  stroke-dashoffset: 3;
}

.fistbump.boom svg path.fl {
  transform: translateX(1.5px);
  animation: fistL 1s ease forwards;
}
.fistbump.boom svg path.fr {
  transform: translateX(-1.5px);
  animation: fistR 1s ease forwards;
}
.fistbump.boom svg path.bm {
  stroke-dasharray: 3;
  stroke-dashoffset: 3;
  animation: bump 1s ease forwards;
}

@keyframes fistL {
  0% {
    transform: translateX(0);
  }
  24% {
    transform: translateX(1.5px);
  }
  25% {
    transform: translateX(1.5px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fistR {
  0% {
    transform: translateX(0);
  }
  24% {
    transform: translateX(-1.5px);
  }
  25% {
    transform: translateX(-1.5px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bump {
  20% {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
  }
  30% {
    stroke-dasharray: 5;
    stroke-dashoffset: 3;
  }
  30.1% {
    stroke-dasharray: 3;
    stroke-dashoffset: 6;
  }
  75% {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
  }
}  
</style>

<div class="fistbump">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12.0017 6V4M8.14886 7.40371L6.86328 5.87162M15.864 7.40367L17.1496 5.87158" class="bm"/>
  <path d="M2 19.0001H7.35165C8.86462 19.0001 10.1408 17.8735 10.3285 16.3722L10.5785 14.3722C10.8023 12.5817 9.40615 11.0001 7.60165 11.0001H7.5L6.79566 10.5305C6.2889 10.1927 5.66315 10.0843 5.07229 10.232C4.39889 10.4004 3.8473 10.8819 3.58951 11.5263L3 13.0001H2" class="fl"/>
  <path d="M22.0005 19.0001H16.6489C15.1359 19.0001 13.8597 17.8735 13.672 16.3722L13.422 14.3722C13.1982 12.5817 14.5944 11.0001 16.3989 11.0001H16.5005L17.2049 10.5305C17.7116 10.1927 18.3374 10.0843 18.9282 10.232C19.6016 10.4004 20.1532 10.8819 20.411 11.5263L21.0005 13.0001H22.0005" class="fr"/>
  </svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
<script>
$('.fistbump').click(function() {
  $(this).addClass("boom");
  setTimeout((function() {
    $('.fistbump').removeClass('boom');
  }), 1000);
});    
</script>

View on Instagram View on Flickr View on Twitter