网站头像css动画边框

网站头像css动画边框

网站头像css动画边框
html代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - SVG Voice UI Animations</title>
 
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="visuals">
  <div class="visual">
    <!-- Ripple -->
    <svg viewBox="0 0 320 320">
      <defs>
        <circle id="circle-clip" cx="50%" cy="50%" r="25%" />
        <clipPath id="avatar-clip">
          <use href="#circle-clip" />
        </clipPath>
      </defs>

      <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="1">
        <animate attributeName="r" values="25%;50%" dur="4s" repeatCount="indefinite" />
        <animate attributeName="fill-opacity" values="1;0" dur="4s" repeatCount="indefinite" />
      </circle>

      <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="1">
        <animate attributeName="r" values="25%;50%" dur="4s" begin="1s" repeatCount="indefinite" />
        <animate attributeName="fill-opacity" values="1;0" dur="4s" begin="1s" repeatCount="indefinite" />
      </circle>

      <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="1">
        <animate attributeName="r" values="25%;50%" dur="4s" begin="2s" repeatCount="indefinite" />
        <animate attributeName="fill-opacity" values="1;0" dur="4s" begin="2s" repeatCount="indefinite" />
      </circle>

      <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="1">
        <animate attributeName="r" values="25%;50%" dur="4s" begin="3s" repeatCount="indefinite" />
        <animate attributeName="fill-opacity" values="1;0" dur="4s" begin="3s" repeatCount="indefinite" />
      </circle>

      <image height="50%" width="50%" x="25%" y="25%" href="https://www.lurenfen.com/media/2022/10/148-1.png" clip-path="url(#avatar-clip)" />  
    </svg>
  </div>
  
  <div class="visual">
    <!-- Bloom -->
    <svg viewBox="0 0 320 320">
  <defs>
    <circle id="circle-clip" cx="50%" cy="50%" r="25%" />
    <clipPath id="avatar-clip">
      <use href="#circle-clip" />
    </clipPath>
  </defs>
  
  <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="0.5" transform-origin="50% 50%">
    <animate attributeName="cx" values="50%;45%;40%;50%;45%;50%;40%;50%" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" values="50%;45%;40%;50%;45%;50%;40%;50%" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="0.5" transform-origin="50% 50%">
    <animate attributeName="cx" values="50%;55%;60%;50%;55%;50%;60%;50%" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" values="50%;55%;60%;50%;55%;50%;60%;50%" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="0.5" transform-origin="50% 50%">
    <animate attributeName="cx" values="50%;45%;40%;50%;45%;50%;40%;50%" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" values="50%;55%;60%;50%;55%;50%;60%;50%" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <circle cx="50%" cy="50%" r="25%" fill="white" fill-opacity="0.5" transform-origin="50% 50%">
    <animate attributeName="cx" values="50%;55%;60%;50%;55%;50%;60%;50%" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" values="50%;45%;40%;50%;45%;50%;40%;50%" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <image height="50%" width="50%" x="25%" y="25%" href="https://www.lurenfen.com/media/2022/10/148-1.png" clip-path="url(#avatar-clip)" />  
</svg>
  </div>
  
  <div class="visual">
    <!-- Pulse -->
    <svg viewBox="0 0 320 320">
  <defs>
    <circle id="circle-clip" cx="50%" cy="50%" r="25%" />
    <clipPath id="avatar-clip">
      <use href="#circle-clip" />
    </clipPath>
  </defs>
  
  <circle cx="50%" cy="50%" r="50%" fill="white" fill-opacity="0.75">
    <animate attributeName="r" values="25%;30%;40%;25%;30%;25%;40%;25%" dur="2s" repeatCount="indefinite" />
  </circle>
  
  <image height="50%" width="50%" x="25%" y="25%" href="https://www.lurenfen.com/media/2022/10/148-1.png" clip-path="url(#avatar-clip)" />  
</svg>
  </div>

  <div class="visual">
    <!-- Scaled Ripple -->
    <svg viewBox="0 0 320 320">
  <defs>
    <circle id="circle-clip" cx="50%" cy="50%" r="25%" />
    <clipPath id="avatar-clip">
      <use href="#circle-clip" />
    </clipPath>
  </defs>
  
  <circle cx="50%" cy="50%" r="50%" fill="white" fill-opacity="0.25" transform-origin="50% 50%">
    <animateTransform attributeName="transform" type="scale" values="0.5;0.75;1;0.5;0.75;0.5;1;0.5" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <circle cx="50%" cy="50%" r="42%" fill="white" fill-opacity="0.25" transform-origin="50% 50%">
    <animateTransform attributeName="transform" type="scale" values="0.5;0.75;1;0.5;0.75;0.5;1;0.5" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <circle cx="50%" cy="50%" r="34%" fill="white" fill-opacity="0.25" transform-origin="50% 50%">
    <animateTransform attributeName="transform" type="scale" values="0.5;0.75;1;0.5;0.75;0.5;1;0.5" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <image height="50%" width="50%" x="25%" y="25%" href="https://www.lurenfen.com/media/2022/10/148-1.png" clip-path="url(#avatar-clip)" /> 
</svg>
  </div>
</div>
<!-- partial -->
  
</body>
</html>

css代码：

此处内容已隐藏，请评论后刷新页面查看.

如果你喜欢我们的文章，欢迎您分享或收藏路人粉的文章！我们网站的目标是帮助每一个有求知欲的人，无论他们的水平和经验如何。我们相信，只要有热情和毅力，无论从什么时候开始学习都不晚。

1. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2766242327进行删除处理。
2. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
★特别声明：
本站为个人博客，博客所发布的一切修改补丁、注册机、注册信息及软件和视频教程的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。访问和下载本站内容，说明您已同意上述条款。本站为非盈利性站点，本站不贩卖软件，所有内容不作为商业行为。

THE END