比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。
过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。
<!DOCTYPE HTML><html>
<head>
<title></title>
<style type="text/css">
html { overflow: hidden }
body { position: absolute margin: 0px padding: 0px background: #000 width: 100% height: 100% }
#bump { position: absolute border: #222 solid 1px width: 530px height: 100px margin-left: -265px margin-top: -50px left: 50% top: 50% }
#bump span { position: absolute font-size: 1px cursor: pointer }
#ch { position: absolute border-top: #222 solid 1px left: 0 width: 100% }
#cv { position: absolute border-left: #222 solid 1px top: 0 height: 100% }
</style>
<script type="text/javascript">
var bmp = function () {
// private vars
var object = [],
ZOOMx,
ZOOMy,
xm,
ym,
nx,
ny,
cx,
cy,
Nx,
Ny,
L,
T,
W,
H,
SP,
cH,
cV,
N = 1,
iL = 1,
iP = 2,
M = 200,
kA = 0,
S = 100
var resize = function () {
nx = document.body.offsetWidth / 2
ny = document.body.offsetHeight / 2
W = SP.offsetWidth
H = SP.offsetHeight
L = SP.offsetLeft
T = SP.offsetTop
}
var init = function (bump) {
document.onselectstart = new Function("return false")
document.onmousedown = function(){ iL = 2 iP = 4 }
document.onmouseup = function(){ iL = 1 iP = 2}
document.onmousemove = function(e){
if (!e) e = window.event
xm = (e.x || e.clientX)
ym = (e.y || e.clientY)
S = 10
M = 200
return false
}
onresize = resize
var sb = function(c ,x ,y) {
bump[y] = bump[y].substring(0,x) + c+bump[y].substring(x+1,999)
}
var b = function(x, y) {
return bump[y].charAt(x)
}
SP = document.getElementById("bump")
cH = document.getElementById("ch")
cV = document.getElementById("cv")
Ny = bump.length
Nx = bump[0].length
resize()
ZOOMx = Math.floor(W / Nx)
ZOOMy = Math.floor(H / Ny)
ym = T + ZOOMx * Ny / 2
cx = xm = L + ZOOMy * Nx / 2
cy = -200
// set shadows
for(var i = 1 i < Ny-1 i++) {
for(var j = 1 j < Nx-1 j++) {
if (b(j,i) === "O") {
if (b(j,i+1) === " ") sb("-",j,i+1)
if (b(j+1,i+1) === " ") sb("-",j+1,i+1)
if (b(j+1,i) === " " || b(j+1,i) === "-") sb("!",j+1,i)
if (b(j+1,i) === "!" && (b(j+1,i-1) === " " || b(j+1,i-1) === "-")) sb("!",j+1,i-1)
if (b(j,i-1) === " " || b(j,i-1) === "I") sb("=",j,i-1)
if (b(j,i-1) === "=" && (b(j-1,i-1) === " " || b(j-1,i-1) === "I")) sb("=",j-1,i-1)
if (b(j-1,i) === " " || b(j-1,i) === "-") sb("I",j-1,i)
if (b(j-1,i) === "I" && (b(j-1,i+1) === " " || b(j-1,i+1) === "-")) sb("I",j-1,i+1)
}
}
}
// compression spans
for(var i=0 i < Ny i++) {
var w = 0
for(var j = 0 j < Nx j++) {
var c = bump[i].charAt(j)
if (c != " "){
var x = j,
y = i,
k = j,
w = 0,
h = 1,
m = i,
cs = "",
cr = c
do {
k++
w++
cs += cr
cr = bump[i].charAt(k)
} while (cr == c && k < Nx)
if (i < Ny-1){
do {
m++
if (bump[m].substring(j,j+w) == cs) {
h++
bump[m] = bump[m].substring(0,j) +
cs.replace(RegExp(c,"gi")," ") +
bump[m].substring(j+w,999)
} else cs = ""
} while (cs!="" && m < Ny-1)
}
object.push(
new CObj(c, x, y, w, h)
)
j += w-1
}
}
}
mainloop()
}
var CObj = function(c, x, y, w ,h) {
var M1 = {
"O": 0,
"I": 1,
"!": -1,
"=": 0,
"-": 0
},
M2 = {
"O": 0,
"I": 0,
"!": 0,
"=": 1,
"-": -1
},
M3 = {
"O": 180,
"I": 115,
"!": 115,
"=": 115,
"-": 115
}
this.c = c
this.x = ZOOMx * x
this.y = ZOOMy * y
this.m1 = M1[c]
this.m2 = M2[c]
this.m3 = M3[c]
this.O = document.createElement("span")
this.O.style.left = Math.round(this.x) + "px"
this.O.style.top = Math.round(this.y) + "px"
this.O.style.width = Math.round(ZOOMx * w) + "px"
this.O.style.height = Math.round(ZOOMy * h) + "px"
SP.appendChild(this.O)
}
CObj.prototype.bumpmapping = function() {
var dx = (cx - this.x - L) / (5 * H) * iP
var dy = (cy - this.y - T) / (5 * H) * iP
var col = Math.round(
iL * (255 - Math.floor(
this.m3 * Math.sqrt(
(dx + this.m1) * (dx + this.m1) + (dy + this.m2) * (dy + this.m2)
)
))
)
this.O.style.backgroundColor = "RGB(" +
Math.round(col * 2) + "," +
Math.round(col * 1.5) + "," +
Math.round(col) + ")"
}
var mainloop = function () {
if(M-- < 0){
S = 100
kA -= .01
xm = nx + Math.cos(kA) * W * 1
ym = ny + Math.sin(kA * 1.1) * H * 2
}
cx += (xm - cx) / S
cy += (ym - cy) / S
cH.style.top = Math.round(cy) + "px"
cV.style.left = Math.round(cx) + "px"
var i = 0, o
while ( o = object[i++] ) o.bumpmapping()
setTimeout(mainloop,16)
}
return {
// public functions
init: init
}
}()
</script>
</head>
<body>
<div id="ch"></div>
<div id="cv"></div>
<div id="bump"></div>
<script type="text/javascript">
bmp.init(
[
" ",
" OOOOOOO OO OO OOOOOOOO OOO OOO OO ",
" OOOOOOOO OO OO OOOOOOOO OOOOOOOOOOOO OO ",
" OO OO OO OO OO OO OO OO OO ",
" OO OO OOOOOOOO OO OO OO OO OO ",
" OO OO OOOOOOOO OO OO OO OO OO ",
" OO OO OO OO OO OO OO OO ",
" OO OO OO OO OO OO OO OO ",
" OOOOOOOO OO OO OO OO OO OOOOOOOO ",
" OOOOOOO OO OO OO OO OO OOOOOOOO ",
" "
]
)
</script>
</body>
</html>
这个完全是我本人自己真实项目当中的代码
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；可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改
