CSS3里怎么实现打字动画

来源：动视网责编：小采时间：2020-11-27 15:27:40

CSS3里怎么实现打字动画

CSS3里怎么实现打字动画:相较于之前的CSS版本，我们利用css3可以实现很多炫酷的东西，比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做出来的。<!DOCTYPE html> <html> <head> <meta cha

推荐度：

点击下载本文 文档为doc格式

导读CSS3里怎么实现打字动画:相较于之前的CSS版本，我们利用css3可以实现很多炫酷的东西，比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做出来的。<!DOCTYPE html> <html> <head> <meta cha

相较于之前的CSS版本，我们利用css3可以实现很多炫酷的东西，比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做出来的。

<!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>

相信通过这个案列大家会熟练的掌握CSS3的这个功能，更多精彩请关注Gxl网其它相关文章！

CSS3里怎么实现打字动画

推荐度：

点击下载本文 文档为doc格式

标签：打字动画实现

热门焦点

CSS3里怎么实现打字动画

CSS3里怎么实现打字动画

CSS3里怎么实现打字动画

最新推荐

猜你喜欢

热门推荐