如何实现文字自动过渡效果
日期：2014-05-16 浏览次数：20678 次
怎么实现文字自动过渡效果
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上面那个W3C网站的过渡效果得鼠标移动到上面上去才会改变 我想实现跟下面网站开头那个文字过渡效果 得怎么搞?
http://www.cheapmortgages.com/
------解决方案--------------------
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点
------解决方案--------------------
至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了
另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好
------解决方案--------------------
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上面那个W3C网站的过渡效果得鼠标移动到上面上去才会改变 我想实现跟下面网站开头那个文字过渡效果 得怎么搞?
http://www.cheapmortgages.com/
------解决方案--------------------
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
