收藏图标的动画效果

来源:https://www.sucaihuo.com/js/3013.html 2017-09-15 21:36浏览(592) 收藏

一款收藏图标的动画效果,图标会由一个灰色的样式逐渐变成彩色且带有星点扩散的样式,整个动画过程会一致循环播放。
收藏图标的动画效果
分类:其它特效 > SVG 难易:初级
查看演示 下载资源 下载积分: 0 积分

页面的head部分,需引入页面的样式文件,代码如下:

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

页面的body部分,需设置好收藏图标及周围的星点,代码如下:

<h2>收藏图标的动画效果</h2>
<div class="favorite">
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <defs>
      <mask id="favorite__halo-mask">
        <rect width="100%" height="100%" fill="white"/>
        <circle class="favorite__halo-inner" cx="50" cy="50" r="0" fill="black"></circle>
      </mask>
    </defs>
    <circle class="favorite__halo-outer" cx="50" cy="50" r="48" fill="#feb53c" mask="url(#favorite__halo-mask)"></circle>
    <path class="favorite__inactive" d="M50.214 10.067c6.4.204 10.753 25.648 10.753 25.648s26.256-1.803 27.13 2.857c.874 4.66-20.04 16.642-20.04 16.642s9.537 24.303 5.523 26.817c-4.015 2.515-23.545-14.023-23.545-14.023S29.333 84.493 25.633 81.785c-3.7-2.71 6.657-26.472 6.657-26.472S11.234 43.94 12.383 39.108c1.15-4.832 26.55-3.393 26.55-3.393s4.88-25.853 11.28-25.648z" fill="#dbdedd" fill-rule="evenodd"/>
    <path class="favorite__active" d="M50.214 10.067c6.4.204 10.753 25.648 10.753 25.648s26.256-1.803 27.13 2.857c.874 4.66-20.04 16.642-20.04 16.642s9.537 24.303 5.523 26.817c-4.015 2.515-23.545-14.023-23.545-14.023S29.333 84.493 25.633 81.785c-3.7-2.71 6.657-26.472 6.657-26.472S11.234 43.94 12.383 39.108c1.15-4.832 26.55-3.393 26.55-3.393s4.88-25.853 11.28-25.648z" fill="#feb53c" fill-rule="evenodd"/>
  </svg>
  <div class="favorite__sprinkle"><div class="favorite__sprinkle-circle"></div></div>
  <div class="favorite__sprinkle"><div class="favorite__sprinkle-circle"></div></div>
  <div class="favorite__sprinkle"><div class="favorite__sprinkle-circle"></div></div>
  <div class="favorite__sprinkle"><div class="favorite__sprinkle-circle"></div></div>
  <div class="favorite__sprinkle"><div class="favorite__sprinkle-circle"></div></div>
</div>

页面的底部,需引入必要的JS文件,代码如下:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
标签: 图标图标动画
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2