JS + CSS realizes typing effect

The example of this article shared JavaScript to implement the specific code of the typing effect, for the reference, the specific content is as follows

1. Effect


2. Source

 # MYDIV {Display: INLINE-block; width: 500px; Height: 300px; Background-Color: RGBA (0, 0,0,0.3); Color: HSLA (0,100%, 70%, 1); Word-Wrap: Break-Word; line-height: 30px; letter-spacing: 3px; padding-left: 3px; text-indent: 40px; border-radius: 5px; -webkit-box-shadow: 3px 3px 3px 3px RGBA (0,0,0,0.1); -Moz-Box-Shadow: 3px 3px 3px 3px RGBA (0,0,0,0,0p Box-shadow: 3px 3px 3px 3px RGBA (0,0,0,0.1);}   Window.onLoad = function () {var mydiv = document.GtelementByid ("MyDiv"); var contentarr = "Autumn is coming to the sky like a sapphire. The small bow outside the village is in the eyes of Bijing Cheng, which is looked at this wonderful sky. A pair of white goose looks at the shadow of the water. The leaves of the maple trees in the valley, I don't know if I have a drink, the red is like a fire. The rice behind the village is low, bending the head, in the autumnThe wind is silently waiting for people to harvest, half-air, and the "people" glyce, happy singing, bid farewell to people, slowly flying to the sky ... ".split (" "); var content = ""; var INDEX = 0; var ID = setInterval (function () {content + = contentarr [index]; mydiv.innerhtml = content + "_"; index ++; if (index === contentr.length) {MYDIV .innerhtml = content; ClearInterval (ID); console.log ("end");}}}}}, 100);}        
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment