How to achieve automatic text transition effect_html/css

How to achieve automatic text transition effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:26:51

Original

2597 people have browsed it

This post was last edited by u013546284 on 2014-01-25 15:06:38

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
The one above The transition effect of the W3C website will only change when the mouse is moved over it. I want to achieve the transition effect with the text at the beginning of the website below. What should I do?
http://www.cheapmortgages.com/

Reply to discussion (solution)

<pre id="test">

Copy after login

Tested

<pre id="test">

Copy after login

Tested
I’ll check it out tonight. I have something to do. Go away

<pre id="test">

Copy after login

Tested
The transition I want is a little bit of pixel display. Aren’t you printing characters one by one...

Give me a hint, this is a div, css style overflow is hidden
Change its width through JS to achieve the effect. For smoothness, you can use window.requestAnimationFrame (function to change the width) to make the refresh rate the same as the screen

Give me a tip, this It is a div, the css style overflow is hidden
The effect is achieved by changing its width through JS. For smoothness, you can use window.requestAnimationFrame (function to change the width) to make the refresh rate the same as the screen
I just looked at the website source code , the method used by this website is to cover it with a div with a white background and then move it to achieve the effect. The implementation is a little more complicated

Give me a hint, this is a div, css The style overflow is hidden
Use JS to change its width to achieve the effect. For smoothness, you can use window.requestAnimationFrame (function to change the width) to make the refresh rate the same as the screen
I just looked at the website source code, this website uses The method is to cover it with a div with a white background and then move it to achieve the effect. The implementation is a little more complicated

As for automatic playback, you can put the JS code under the div code and write window directly inside. Just requestAnimationFrame (function that changes the width)

In addition, if you don’t want to use JS, you can use CSS3 animation to achieve it, but it is not compatible with lower version browsers

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#wrap {	height:35px;	width:700px;	padding:0px;	position:relative;	overflow:hidden;}#mask {	height:35px;	width:700px;	position:absolute;	background-color:#fff;	top:0px;	left:0px;}.move {	-webkit-animation: mm 15s;}@-webkit-keyframes mm /* Safari 和 Chrome */{from {left: 0px;}to {left: 700px;}}</style></head><body>	<div id='wrap'>		<div id='mask' class='move'></div>		<div id='text'><p>我要的过渡是一点点像素的显示 你这不是一个个的在打印字符么</p></div>	</div><script></script></body></html>

Copy after login

Give me a hint, this is a div, the css style overflow is hidden
Change its width through JS to achieve the effect. For smoothness, you can use window.requestAnimationFrame (function to change the width) ) to make the refresh rate the same as the screen
I just looked at the website source code. The method used by this website is to cover it with a div with a white background and then move it to achieve the effect. The implementation is a little more complicated

As for automatic playback, you can put the JS code under the div code, and directly write window.requestAnimationFrame (function that changes the width) inside.

In addition, if you don’t want to use JS, you can use CSS3 animation. Implemented, but the compatibility with lower version browsers is not good
Thank you very much!!!!