分享更有价值
被信任是一种快乐

如何使用Css3实现炫酷的打字动画

文章页正文上

这篇文章给大家分享的是有关如何使用Css3实现炫酷的打字动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 Document

.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; }

//计算出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.offsetWidt免费云主机、域名h-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 if(newtext[i] != oldtext[i]) { text += newtext[i]; inner.innerHTML = newtext; } } total += text; // 生成 for(var i =0;i var a = new createspan(text[i],offx,offy); a.render(); a.recover(); } } //删除字符 }) 感谢各位的阅读!关于“如何使用Css3实现炫酷的打字动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: GitHub是否支持FIDO2安全密钥

GitHub是否支持FIDO2安全密钥,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。GitHub 新提供了在进行 SSH Git 操作时使用 FIDO2 安全密钥的支持,以增加对账…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册