如何给html页面添加动态等待效果

如何给html页面添加动态等待效果,第1张

HTML 代码

<div class="spinner"></div>

CSS 代码:

.spinner {

width: 60px

height: 60px

background-color: #67CF22

margin: 100px auto

-webkit-animation: rotateplane 1.2s infinite ease-in-out

animation: rotateplane 1.2s infinite ease-in-out

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg)

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)

}

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script>

var time=5

var timer=setInterval('tiaozhuan()',1000)

function tiaozhuan(){

var t= document.getElementById("id8")

if(time>0){

t.innerHTML=time

time--

}else {

clearInterval(timer)

location.href="练习.html"

}

}

</script>

</head>

<body>

<font id="id8" size="7">5</font>秒钟跳转<a href="练习.html" >或点击我直接跳转</a>

</body>

</html>

最简单的一种:直接在前面<head>里面添加代码:

1

2

<span style="font-size:18px"></span><span style="font-size:24px"><meta http-equiv="refresh" content="3URL=res.html"></span>

<span style="font-size:24px">//3秒之后自动跳转到res.html,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)</span>

方法2:

需要用到window里面的方法:

setTimeout 经过指定毫秒值后计算一个表达式。

例子:

window.setTimeout("alert('Hello, world')", 1000)

这个是写在js代码里面的;

希望对你有所帮助!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6220517.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存