这个完全是我本人自己真实项目当中的代码
http://1.xifan00520.applinzi.com/weixin/index.html
其实不用js 用css3就能完成
代码如下
标签：{
background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A))
background-clip: text//文字背景区域
-webkit-background-clip: text
-webkit-text-fill-color: transparent
text-fill-color: transparent
-webkit-animation: slidetounlock 2s linear infinite//动画执行的参数 第一是 动画执行的名字 第二是所需时间 第三是执行动画的快慢infinite是均速 第四个参数是循环
animation: slidetounlock 2s linear infinite
}
为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画
@keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-webkit-keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-moz-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-ms-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-o-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
之后你只需要设置文字所在容器的宽度就行，用px可以代替rem；可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改
建议楼主看下js基础每一项都是js使用中的小技巧，基础但十分的实用！
1.document.write("")输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:
document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:
window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:
document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS:
document.getElementById("output").value=document.getElementById("input").value.toUpperCase()
7.JS中的值类型:
String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:
parseInt(),parseFloat()
9.JS中的数字转换成字符型:
("" 变量)
10.JS中的取字符串长度是:
(length)
11.JS中的字符与字符相连接使用 号.
12.JS中的比较操作符有:
==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:
var来进行声明
14.JS中的判断语句结构:
if(condition){}else{}
15.JS中的循环结构:
for([initial expression][condition][upadte expression]) {inside loop}
16.循环中止的命令是:
break
17.JS中的函数定义:
function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:
打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:
window.status="字符"
21.弹出提示信息:
window.alert("字符")
22.弹出确认框:
window.confirm()
23.弹出输入提示框:
window.prompt()
24.指定当前显示链接的位置:
window.location.href="URL"
25.取出窗体中的所有表单的数量:
document.forms.length
26.关闭文档的输出流:
document.close()
27.字符串追加连接符: =
28.创建一个文档元素:
document.createElement(),document.createTextNode()
29.得到元素的方法:
document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0i<form.elements.lengthi ){
if (form.elements.type == "text"){
form.elements.value = ""
}
}
