前端JS特效第58波：洋葱剥皮文本变形特效

作者：喵喵爱编程 | 2024-07-28 07:57:09

踩

洋葱剥皮文本变形特效，先来看看效果：

部分核心的代码如下：


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Onion Skinning Text Morphing</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="./css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
 
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrap">
<svg width="28.2" height="31" viewBox="0 0 28.2 31">
<path id="st0" fill="none" stroke-width="0.2" stroke="#3D8CD0" d="M27.7,13.1v13.6c-0.7,0.5-1.4,1-2.3,1.4c-0.9,0.5-1.8,0.9-2.9,1.2s-2.2,0.6-3.4,0.9c-1.2,0.2-2.5,0.3-3.9,0.3
	c-2.5,0-4.6-0.3-6.5-1c-1.8-0.7-3.4-1.7-4.6-3c-1.2-1.3-2.1-2.9-2.7-4.7c-0.6-1.8-0.9-3.9-0.9-6.1c0-2.3,0.3-4.5,0.9-6.3
	S3,5.8,4.2,4.5c1.2-1.3,2.7-2.3,4.5-3c1.8-0.7,3.8-1,6.1-1c2,0,3.8,0.3,5.3,0.8c1.5,0.5,2.8,1.2,3.8,2.1c1,0.9,1.8,1.9,2.4,3.1
	c0.6,1.2,1,2.4,1.2,3.7l-9.1,0.8c-0.2-1-0.6-1.8-1.2-2.2c-0.6-0.4-1.4-0.6-2.4-0.6c-1.7,0-3,0.6-3.8,1.7c-0.8,1.1-1.2,3-1.2,5.6
	c0,2.7,0.4,4.6,1.3,5.8c0.9,1.2,2.4,1.8,4.5,1.8c1.4,0,2.6-0.2,3.6-0.6V20h-3.8v-6.9H27.7z"/>
</svg>
</div>
<!-- partial -->
  <script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script  src="./js/script.js"></script>
 
</body>
</html>

全部代码：洋葱剥皮文本变形特效

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】