Comment implémenter une animation de frappe en CSS3-tutoriel HTML-php.cn

Comment implémenter une animation de frappe en CSS3

php中世界最好的语言

Libérer： 2017-11-25 14:32:24

original

1681 Les gens l'ont consulté

Par rapport à la version précédente de CSS, nous pouvons utiliser CSS3 pour réaliser de nombreuses choses intéressantes, comme la saisie d'animations qui ne peuvent pas être réalisées avec l'ancienne version de CSS. Ci-dessous, nous vous présenterons un petit cas pour voir comment des animations de frappe sympas sont créées.

<!DOCTYPE html>
<html>
<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>
        <div>
 
        </div>
        <div>
            <span></span>
        </div>
        <textarea placeholder="请输入文字"></textarea>
    </div>
</body>
    <script>
    //计算出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);
 
        //创造一个span标签 需要注入需要注入起始坐标
        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 = "";
        //监听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>

Copier après la connexion

Je crois que grâce à ce cas, tout le monde maîtrisera parfaitement cette fonction de CSS3. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment implémenter l'effet d'animation de chargement en CSS3

Comment implémenter en CSS3 Effets spéciaux d'animation de bouton radio

Comment écrire si la condition hack en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!