How to achieve automatic text transition effect_html/css

Home

Web Front-end

HTML Tutorial

How to achieve automatic text transition effect_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:26 PM

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

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion

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>

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles