搜索

首页 >web前端 >html教程 >怎么实现文字自动过渡效果_html/css_WEB-ITnose

怎么实现文字自动过渡效果_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:26:512599浏览

本帖最后由 u013546284 于 2014-01-25 15:06:38 编辑

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上面那个W3C网站的过渡效果得鼠标移动到上面上去才会改变 我想实现跟下面网站开头那个文字过渡效果 得怎么搞?
http://www.cheapmortgages.com/

回复讨论(解决方案)

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测 

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测
我晚上看看 我有事 走开下 

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测
我要的过渡是一点点像素的显示 你这不是一个个的在打印字符么...

给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同

给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点


给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点

至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了

另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好 

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



给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点

至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了

另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好
非常感谢!!!!

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：ul嵌套，li加背景图片后出现重叠，请教如何解决_html/css_WEB-ITnose下一篇：div+css 常用两栏/三种自动适应宽度分栏 兼容ie6789 火狐 谷歌等浏览器_html/css_WEB-ITnose

相关文章

查看更多