http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上面那个w3c网站的过渡效果得鼠标移动到上面上去才会改变 我想实现跟下面网站开头那个文字过渡效果 得怎么搞?
http://www.cheapmortgages.com/
回复讨论(解决方案)
<pre class="brush:php;toolbar:false;" id="test">
已测
<pre class="brush:php;toolbar:false;" id="test">
已测
我晚上看看 我有事 走开下
<pre class="brush:php;toolbar:false;" id="test">
已测
我要的过渡是一点点像素的显示 你这不是一个个的在打印字符么...
给个提示，这是一个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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div> </div><script></script></body></html>
给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点
至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了
另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好
非常感谢!!!!
