无论css还是js，都有好多种方法能实现，写个简单的例子给你
jquery写法（需要加载jquery文件），如下：
<h1 class="demo">测试文字，测试文字，测试文字</h1> $(".demo").hover(function(){$(this).fadeOut(1000)
})
css写法，如下：
<h1 class="demo">测试文字，测试文字，测试文字</h1> .demo{transition: 1s
-moz-transition: 1s
-webkit-transition: 1s
-o-transition: 1s
}
.demo:hover{
opacity: 0
}
意思是文字从右向左滑动吧，说说方法吧。首先这一段文字得放在一个盒子里，比如是text，然后再把这个盒子放在另外一个盒子里，比如box，设置属性，overflow:hidden。文字从左向右消失是装这些文字的盒子div整体在向左移动，当移到盒子box边缘时，由于设置overflow:hidden，所以div继续向左移动，那么左边超出边缘的就看不见了，从而达到效果。
<input type="text" placeholder="请输入文字"> <!-- 添加placeholder不需要js控制 --><input id='keyword' name='keyword' type="text"> <!-- 这里可以用js控制 -->
<script>
var keyword = document.getElementById('keyword')
if (!keyword.value) {
keyword.style='color: #999'
keyword.value = '请输入文字'
}
keyword.onfocus = function(e) {
if (!e.target.value || (e.target.value === "请输入文字")) {
keyword.removeAttribute('style')
keyword.value = ''
}
}
keyword.onblur = function(e) {
if (!e.target.value || (e.target.value === "请输入文字")) {
keyword.style='color: #999'
keyword.value = '请输入文字'
}
}
</script>
