Shulou(Shulou.com)06/01 Report--

This article is about how to use Css3 to achieve cool typing animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

}

/ / calculate the offset value of the input input box

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)

/ / to create a span tag, you need to inject the starting coordinates.

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 [XSS _ clean] = 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 = ""

/ / Monitor the input changes of the textarea text box

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

}

/ / there are two situations in which the text changes in advance, one is to increase and the other is to decrease

Newtext = textarea.value

Oldtext = innerxss _ clean]

Newtext = newtext.trim ()

/ / add characters

If (newtext.length > oldtext.length) {

For (var I = 0 * * I < newtext.length;i++) {

If (Newtext [I]! = oldtext [I]) {

Text + = newtext [I]

Inner [XSS _ clean] = newtext

}

}

Total + = text

/ / generate

For (var I = 0 * * I < text.length;i++) {

Var a = new createspan (text [I], offx,offy)

A.render ()

A.recover ()

}

}

/ / Delete characters

})

Thank you for reading! This is the end of this article on "how to use Css3 to achieve cool typing animation". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.