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:0;background:#fafafa}#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}h1{text-align:center}
    </style>

</head>

<body>


    <!-- The two texts -->
    <div id="container">
        <h1>JS+SVG文字变形动画特效</h1>
        <span id="text1"></span>
        <span id="text2"></span>
    </div>

    <!-- The SVG filter used to create the merging effect -->
    <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>
    <!-- partial -->
    <script>
        const elts = {
          text1: document.getElementById("text1"),
          text2: document.getElementById("text2") };
        
        
        // The strings to morph between. You can change these to anything you want!
        const texts = [
        "JavaScript",
        "Bfw.wiki",
        "HTML",
        "jQuery",
        "Angular",
        "React",
        "Vue"];
        
        
        // Controls the speed of morphing.
        const morphTime = 1;
        const cooldownTime = 0.25;
        
        let textIndex = texts.length - 1;
        let time = new Date();
        let morph = 0;
        let cooldown = cooldownTime;
        
       .........完整代码请登录后点击上方下载按钮下载查看