单击心动画

时间：2017-10-06 17:10:35

标签： javascript css animation svg css-animations

所以我想创建一个动画，你可以点击心脏周围有一个圆圈，它会向上扩展，然后逐渐消失。我试图给SVG一个边框，但什么都没有出现？老实说，我不确定我在这里做错了什么。任何帮助将不胜感激。我希望它类似于Twitter的心脏，但是当你点击它时没有心脏周围的点。这是我的codepen https://codepen.io/Brushel/pen/MEEYgQ

的链接

＆＃13;
＆＃13; 
(function() {
  var animatedHeart, heartanimation, heartanimationthree;

  animatedHeart = document.getElementById('heart1');

  heartanimation = document.getElementById('heart2');

  heartanimationthree = document.getElementById('heart3');

  animatedHeart.addEventListener('click', function() {
    return animatedHeart.classList.toggle('fill');
  });

  heartanimation.addEventListener('click', function() {
    return heartanimation.classList.toggle('fillup');
  });

  heartanimationthree.addEventListener('click', function() {
    return heartanimationthree.classList.toggle('heartscale');
  });

}).call(this);
＆＃13; 
body {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  background: black;
  height: 100vh;
}

h2 {
  text-align: center;
  color: white;
  font-weight: 300;
  letter-spacing: 0.6px;
  font-size: 3em;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: 1280px;
  margin: 10px auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

#heart1 {
  max-height: 70px;
  fill: white;
  stroke: white;
  cursor: pointer;
}

.fill {
  -webkit-animation: love .5s linear alternate forwards;
          animation: love .5s linear alternate forwards;
  stroke: #D22128;
  stroke-width: 5px;
}

@-webkit-keyframes love {
  0% {
    stroke-dashoffset: 1000;
    stroke: #D22128;
  }
  50% {
    stroke-dashoffset: 0;
    stroke: #D22128;
    fill: #D22128;
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    stroke: transparent;
    fill: #D22128;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes love {
  0% {
    stroke-dashoffset: 1000;
    stroke: #D22128;
  }
  50% {
    stroke-dashoffset: 0;
    stroke: #D22128;
    fill: #D22128;
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    stroke: transparent;
    fill: #D22128;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#heart2 {
  max-height: 70px;
  fill: white;
  cursor: pointer;
}

.fillup {
  -webkit-animation: lovebutton .5s alternate forwards;
          animation: lovebutton .5s alternate forwards;
}

@-webkit-keyframes lovebutton {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0);
    fill: #D22128;
  }
  25% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
    fill: #D22128;
  }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0);
    fill: #D22128;
  }
}

@keyframes lovebutton {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0);
    fill: #D22128;
  }
  25% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
    fill: #D22128;
  }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0);
    fill: #D22128;
  }
}
#heart3 {
  max-height: 70px;
  fill: white;
  stroke: white;
  cursor: pointer;
}

.heartscale {
  -webkit-animation: heart-beat .5s alternate forwards;
          animation: heart-beat .5s alternate forwards;
  stroke-width: 0px;
}

@-webkit-keyframes heart-beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.3, 1.3);
            transform: scale(1.3, 1.3);
    fill: #D22128;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    fill: #D22128;
  }
}

@keyframes heart-beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.3, 1.3);
            transform: scale(1.3, 1.3);
    fill: #D22128;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    fill: #D22128;
  }
}
＆＃13; 
<body>
  <div class="container">
    <div class="col-12">
      <h2>Animated Hearts</h2>
      <div class="circle">
  <svg class="mo-icon__svg" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart1">
<g id="icon_x5F_wishlist">
	<g transform="translate(0,-952.36218)">
		<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
			c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
			c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
			c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
	</g>
</g>
</svg>
    </div>
<!--     End of the first Heart     -->
        
        <svg class="mo-icon__svg" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart2">
<g id="icon_x5F_wishlist">
	<g transform="translate(0,-952.36218)">
		<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
			c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
			c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
			c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
	</g>
</g>
</svg>
      
<!--    End of second heart    -->
      
      <svg class="mo-icon__svg" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart3">
<g id="icon_x5F_wishlist">
	<g transform="translate(0,-952.36218)">
		<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
			c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
			c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
			c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
	</g>
</g>
</svg>
      


    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

最后一个看起来很近！我认为在CSS中有一种更简单的方法。

尼古拉斯·埃斯科弗（Nicolas Escoffer）在这里有一篇很棒的文章：

文章： https://blog.prototypr.io/twitter-s-heart-animation-in-full-css-b1c00ca5b774

密码笔： https://codepen.io/OxyDesign/pen/avXVbo

否则，我建议创建一个关键帧动画，该动画使用您创建的圆div的边界。确保将圆div设置在心脏.svg的外面，这样它就不会包裹元素：

下面我根据您的原始密码笔为您制作了一个示例：

#HTML：

<body>
  <div class="container">
    <div class="col-12">
      <h2>&nbsp;</h2>
      <br>
      <div id="circle" class="circle"></div>
       <svg class="mo-icon__svg" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart4">
<g id="icon_x5F_wishlist">
    <g transform="translate(0,-952.36218)">
        <path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
            c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
            c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
            c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
    </g>
</g>
</svg>
  </div>
</body>

#SCSS：

body {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  background: black;
  height: 100vh;
  color: white;
}

h2{
  text-align: center;
  color: white;
  font-weight: 300;
  letter-spacing: 0.6px;
  font-size: 3em;
  user-select: none;
  
}

// Set up basic Grid
.container {
  display: block;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 1280px;
  margin: 10px auto;
  padding-left: 50%;
  margin-left: auto;
  margin-right: auto;
}

.col-12{
  flex: 0 0 100%;
}

// Fourth Animation


#heart4 {
  max-height: 70px;
  fill: white;
  stroke: white;
  cursor: pointer;
  position: relative;
  width: 5rem;
}

.dot-animation {
  position: relative;
}


.dot {
  height: 10px;
  width: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  &:nth-child(1){
    background: #D22128;
    left: 49.7%;
    top: 75px;
  }
   &:nth-child(2){
    background: #D22128;
    left: 49.4%;
    bottom: 8%;
  }
   &:nth-child(3){
    background: #D22128;
    left: 53.5%;
    top: 30px;
  }
   &:nth-child(4){
    background: #D22128;
    left: 45%;
    top: 30px;
  }
}

.bands {
  animation: snap 1s forwards;
  stroke-width: 0;
}

@keyframes snap {
  from { 
  transform: scale3d(1, 1, 1); 
  filter: brightness(0.5);
  }
  30% {  
    transform: scale3d(1.25, 0.75, 1); }
  40% {  
    transform: scale3d(0.75, 1.25, 1); }
  50% {  
    transform: scale3d(1.15, 0.85, 1); }
  65% {  
    transform: scale3d(.95, 1.05, 1); }
  75% {  
    transform: scale3d(1.05, .95, 1); }
  to {   
    transform: scale3d(1, 1, 1);
    fill: #D22128; 
    filter: brightness(1);
  }
}

.circle {
  position: absolute;
  display: block;
  border: 1px solid white;
  margin-left: 2.5rem;
  top: 8rem;
}

.burst {
    animation: burst .5s forwards;
}

@keyframes burst {
  0% {
  border: 1px solid white;
  border-radius: 50% 50%;
  width: 0.25rem;
  height: 0.25rem;
    
  }
  100% {
  border: 5px solid white;
  border-radius: 50% 50%;
  width: 7rem;
  height: 7rem;
  margin-left: -.90rem;
  margin-top: -2.45rem;
  opacity: 0;
  z-index: 999;
  }
}

#JS：

# Grab Element
heartanimationfour = document.getElementById('heart4')
circle = document.getElementById('circle')

# Add event listener for the click
heartanimationfour.addEventListener 'click', ->
  heartanimationfour.classList.toggle 'bands',
  circle.classList.toggle 'burst'

https://codepen.io/cwoolf123/pen/wvMdyKq?editors=1111

相关问题
最新问题