gsap+svg文字单词入场动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+svg文字单词入场动画效果代码

代码标签: gsap svg 文字 单词 入场 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
 background-color: #293A4B;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

#ringGroup circle {
	filter: url(#glow)
}
</style>



</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<defs>
		      <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
        <feGaussianBlur stdDeviation="4" result="coloredBlur" />
        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#293A4B" flood-opacity="0.4"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
   <filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
        <feOffset in="SourceAlpha" dx="4" dy="4" result="offsetOut"></feOffset>        
        <feGaussianBlur stdDeviation="4" in="offsetOut" result="drop" />
       <feBlend in="SourceGraphic" in2="drop" mode="normal" />
      </filter>		
		<clipPath id="maskR">
			<rect class="maskR" x="398.03" y="183.39" width="339.72" height="255.77" fill="red" />
		</clipPath>
		<clipPath id="maskL">
			<rect class="maskL" x="62.25" y="183.39" width="335.78" height="255.77" fill="red" />
		</clipPath>
<g id="believeText" fill="#FFF">
		<path id="dot" d="M397.95,237.54c10.38,0,18.88,7.87,18.88,18.25s-8.5,17.93-18.88,17.93-18.72-7.55-18.72-17.93,8.34-18.25,18.72-18.25Z" />
	<path id="i" d="M420.14,288.36c0,5.98-4.09,17.93-4.09,34.14,0,11.48,3.15,21.71,3.15,29.58,0,4.88-3.78,9.44-12.74,9.44-14,0-25.96-5.82-25.96-11.96s3.62-19.04,3.62-30.68-4.09-17.15-4.09-23.91c0-8.34,16.36-15.42,29.73-15.42,6.29,0,10.38,2.99,10.38,8.81Z" />
	<g id="leftChars" clip-path="url(#maskL)">
		<g>
			<path d="M194.24,276.56c0,15.1-9.28,22.65-9.28,23.44,0,.94,19.82,4.88,19.82,25.33s-20.77,37.13-44.36,37.13-37.13-7.87-39.02-11.64c-3.3-6.61-5.82-27.53-5.82-48.93s1.89-41.69,7.24-44.83c6.14-3.62,17.46-6.76,31.46-6.76,26.11,0,39.96,11.17,39.96,26.27Zm-44.36-2.67c-1.57,.79-1.89,9.12-1.89,11.17s.79,3.78,3.78,3.78c5.98,0,11.33-4.41,11.33-10.07,0-3.78-2.05-6.76-6.29-6.76-2.04,0-5.35,.94-6.92,1.89Zm1.1,47.51c0,.63-.16,3.15-.16,5.82,0,2.05,.16,4.09,.31,5.51,.47,2.36,1.89,2.67,4.56,2.67,5.66,0,12.27-3.46,12.27-8.97,0-5.19-4.41-8.18-9.91-8.18-2.83,0-7.08,1.42-7.08,3.15Z" />
		</g>
		<g>
			<path d="M278.56,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
		</g>
		<g>
			<path d="M342.74,256.74c0,3.3-6.14,36.81-6.14,54.9,0,13.06,2.67,15.42,8.34,15.42,13.37,0,21.87-10.54,24.7-10.54,2.52,0,4.88,1.57,4.88,8.18,0,14.95-.94,25.64-15.42,31.15-11.17,4.25-20.14,4.56-29.73,4.56s-23.6-2.04-27.53-10.07c-2.99-5.98-4.72-30.05-4.72-48.45,0-24.54,2.36-40.43,9.28-44.21,8.34-4.56,23.28-7.55,28.63-7.55,4.72,0,7.71,3.15,7.71,6.61Z" />
		</g>
	</g>
	<g id="rightChars" clip-path="url(#maskR)">
		<g>
			<path d="M672.62,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
		</g>
		<g>
			<path d="M600.73,266.02c0,9.6-2.99,34.77-10.7,56.48-7.87,21.87-12.74,28.16-21.55,32.41-8.97,4.25-20.77,5.66-25.8,5.66-6.76,0-14-5.66-19.98-15.73-7.71-12.9-18.41-40.75-18.41-66.7,0-9.44,8.02-13.37,18.56-18.56,8.65-4.25,16.05-4.56,18.25-4.56,2.36,0,5.66,2.04,5.66,6.61s-1.57,31.15-1.57,44.05,3.62,17.78,5.66,17.78c1.89,0,9.6-12.27,9.6-31.94,0-17.15-3.15-22.97-3.15-27.06s25.17-13.53,32.72-13.53,10.7,5.66,10.7,15.1Z" />
		</g>
		<g>
			<path d="M492.34,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
		</g>
	</g>
	</g>
		<mask id="ringMask">
			<use class="believeText" href="#believeText" />
			</mask>
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0