js实现文字变形显示效果代码-html代码-BFW代码库

js实现文字变形显示效果代码

代码语言：html

所属分类：动画

代码描述：js实现文字变形显示效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');

body {
	margin: 0px;
}

#container {
	position: absolute;
	margin: auto;
	width: 100vw;
	height: 80pt;
	
	top: 0;
	bottom: 0;
	
	filter: url(#threshold) blur(0.6px);
}

#text1, #text2 {
	position: absolute;
	width: 100%;
	display: inline-block;
	
	font-family: 'Raleway', sans-serif;
	font-size: 80pt;
	
	text-align: center;
	
	user-select: none;
}
</style>




</head>

<body  >
  <div id="container">
	<span id="text1"></span>
	<span id="text2"></span>
</div>

<svg id="filters">
	<defs>
		<filter id="threshold">
			<feColorMatrix in="SourceGraphic"
					type="matrix"
					values="1 0 0 0 0
									0 1 0 0 0
									0 0 1 0 0
									0 0 0 255 -140" />
		</filter>
	</defs>
</svg>


  
      <script >
const elts = {
  text1: document.getElementById("text1"),
  text2: document.getElementById("text2") };


const texts = [
"Why",
"is",
"this",
"so",
"satisfying",
"to",
"watch?"];


const morphTime = 1;
const cooldownTime = 0.25;

let textIndex = texts.length - 1;
let time = new .........完整代码请登录后点击上方下载按钮下载查看