基于js+css3文章列表喜欢点赞按钮特效源码

<link rel="stylesheet" href="css/style.css">

<script src="js/script.js"></script>

<article>
   <div class="like">
      <div class="icon">
         <svg viewBox="0 0 24 24">
            <path
                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
                  />
         </svg>
      </div>
      <div class="shadow"></div>
      <div class="number">232</div>
   </div>
   <div class="content">
      <h1>支付方式</h1>
      <span>⏱ 进行中</span>
      <p>
        我们想引入自定义域来启用白色标签服务。目前阻碍我们前进的是我们目前在每个公共仪表板上都提供HTTPS。定制您的URL将使其成为HTTP页面。
      </p>
      <p>
        我们目前正在考虑一种简单的方法来实现这个HTTPS。
      </p>
   </div>
</article>
<article>
   <div class="like active">
      <div class="icon">
         <svg viewBox="0 0 24 24">
            <path
                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
                  />
         </svg>
      </div>
      <div class="shadow"></div>
      <div class="number">420</div>
   </div>
   <div class="content">
      <h1>语言转换</h1>
      <span>✨ New </span>
      <p>
         目前我们自动检测浏览器语言，并以此方式设置公共仪表板的语言。这可能是因为用户有一个英文浏览器，但实际上更喜欢阅读德语的内容。
      </p>
   </div>
</article>