怎么实现文字自动过渡效果
本帖最后由 u013546284 于 2014-01-25 15:06:38 编辑
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>