SVG动画文字

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>

<div id="playPause">
<svg width="50%" viewBox="0 0 177.7 63.3" class="letters letters--effect-1">
  

  <g class="letter letter--1">
	  <g class="letter__part">
      <path class="letter__layer color-1" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
      <path class="letter__layer color-3" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
       <path class="letter__layer color-2" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
      </g>
	</g>
  

   <g class="letter letter--2">
     <g class="letter__part">
        <path class="letter__layer color-1" d="M43,45.3l17.7,0.5"/>
       <path class="letter__layer color-1" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
       
     </g>
     <g class="letter__part">
         <path class="letter__layer color-3" d="M43,45.3l17.7,0.5"/>
        <path class="letter__layer color-3" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
     </g>
      <g class="letter__part">
         <path class="letter__layer color-2" d="M43,45.3l17.7,0.5"/>
        <path class="letter__layer color-2" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
     </g>
     
  </g>
  
  
   <g class="letter letter--4">
	   <g class="letter__part">
        <path class="letter__layer color-1" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6	c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
       <path class="letter__layer color-3" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6	c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
       <path class="letter__layer color-2" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6	c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
     </g>
  </g>
  
  

   <g class="letter letter--3">
	   <g class="letter__part">
        <path class="letter__layer color-1" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4	c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
        <path class="letter__layer color-3" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4	c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
       <path class="letter__layer color-2" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4	c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
     </g>
  </g>

<g class="letter letter--5">
	   <g class="letter__part">
        <path class="letter__layer color-1" d="M136.3,56.9l2.4-47.2"/>
        <path class="letter__layer color-3" d="M136.3,56.9l2.4-47.2"/>
        <path class="letter__layer color-2" d="M136.3,56.9l2.4-47.2"/>
      </g>
  </g>

<g class="letter letter--5">
	   
     <g class="letter__part">
        <path class="letter__layer color-1" d="M152,33.2l13.4-0.5"/>
       <path class="letter__layer color-1" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
       
     </g>
      <g class="letter__part">
        
        <path class="letter__layer color-3" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
        <path class="letter__layer color-3" d="M152,33.2l13.4-0.5"/>
     </g>
     <g class="letter__part">
        
        <path class="letter__layer color-2" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
        <path class="letter__layer color-2" d="M152,33.2l13.4-0.5"/>
     </g>
     
  </g>

</svg>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG动画文字-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号