溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用Css3實(shí)現(xiàn)炫酷的打字動(dòng)畫

發(fā)布時(shí)間：2022-03-01 11:32:48 來(lái)源：億速云 閱讀：131 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何使用Css3實(shí)現(xiàn)炫酷的打字動(dòng)畫的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style type="text/css" media="screen">

        .box {

            width:100%;

            height:500px;

            text-align:center;

            position:relative;

        }

        .container {

            width:80%;

            height:400px;

            border:1px solid red;

            text-align:left;

            margin:0 auto;

        }

        .container span {

            display:inline-block;

            border:1px solid red;

            transition: all 2s;

            transform:translateY(0px) rotate(0deg);

            font-size:14px;

        }

        textarea {

            width:200px;

            resize:none;

            height:20px;

            line-height:20px;

            padding:10px 0px;

            font-size:14px;

            font-weight:400;

        }

        .clone {

            font-size:14px;

            border:1px solid red;

            width:80%;

            height:20px;

            margin:0 auto;

            line-height:20px;

            padding:10px 0px;

            text-align:left;

            visibility:hidden;

        }

        .clone span {

            transition:all 2s;

            position:absolute;

        }

 

    </style>

</head>

<body>

    <div class= "box">

        <div class="container">

 

        </div>

        <div class="clone">

            <span class="inner"></span>

        </div>

        <textarea class="textarea" placeholder="請(qǐng)輸入文字"></textarea>

    </div>

</body>

    <script>

    //計(jì)算出input輸入框的偏移值

    var container = document.querySelector(".container");

    var inner = document.querySelector(".inner");

    var clone = document.querySelector(".clone");

    var textarea = document.querySelector(".textarea");

    var offx = (container.offsetWidth - textarea.offsetWidth-20)/2;

    var offy = (container.offsetHeight + inner.offsetHeight);

 

        //創(chuàng)造一個(gè)span標(biāo)簽 需要注入需要注入起始坐標(biāo)

        function createspan(text,x,y) {

           this.text = text;

           this.x = x;

           this.y = y;

           this.init = {};

        }

        createspan.prototype.render = function() {

            var span = document.createElement("span");

            container.appendChild(span);

            span.style.display = "inline-block";

            span.style.transform = "translateX("+this.x+"px) translateY("+this.y+"px) rotate(720deg)";

            span.style.transition = "all 2s";

            span.innerHTML = this.text;

            this.init = span;

        }

        createspan.prototype.recover = function() {

            var that = this;

            setTimeout(function(){

                that.init.style.transform = "translateX(0px) translateY(0px) rotate(0deg)";

            },10)

        }

        var newtext = "";

        var oldtext = "";

        var x = 0;

        var y = 0;

        var total = "";

        //監(jiān)聽textarea文本框的輸入變化情況

        textarea.addEventListener("input",function(){

            var text = "";

            if (inner.offsetWidth >= container.offsetWidth ) {

                offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth;

            }

            else if (inner.offsetWidth >= textarea.offsetWidth*3) {

                offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth*3;

            }

             else if (inner.offsetWidth >= textarea.offsetWidth*2) {

                offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth*2;

            } else if(inner.offsetWidth>=textarea.offsetWidth) {

                offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth;

            }

 

            //先算文字的變化 兩種情況一種是增加一種是減少

            newtext = textarea.value;

            oldtext = inner.innerHTML;

            newtext = newtext.trim();

            //添加字符

            if(newtext.length > oldtext.length) {

                for(var i = 0;i < newtext.length;i++) {

                    if(newtext[i] != oldtext[i]) {

                       text += newtext[i];

                        inner.innerHTML = newtext;

                    }

                }

                total += text;

                // 生成

                    for(var i =0;i < text.length;i++) {

 

                        var a = new createspan(text[i],offx,offy);

                        a.render();

                        a.recover();

                    }

            }

            //刪除字符

 

        })

    </script>

</html>

感謝各位的閱讀！關(guān)于“如何使用Css3實(shí)現(xiàn)炫酷的打字動(dòng)畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手