如何利用html5制作出Loading加载效果

如何利用html5制作出Loading加载效果,第1张

我用css3写了个demo

<html>

<head>

<meta charset="utf-8"/>

<title>Loading</title>

<style>

.spinner {

margin: 100px auto

width: 60px

height: 60px

text-align: center

font-size: 10px

}

.spinner >div {

background-color: #67CF22

height: 100%

width: 6px

display: inline-block

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

animation: stretchdelay 1.2s infinite ease-in-out

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s

animation-delay: -1.1s

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s

animation-delay: -1.0s

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s

animation-delay: -0.9s

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s

animation-delay: -0.8s

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4)

-webkit-transform: scaleY(0.4)

} 20% {

transform: scaleY(1.0)

-webkit-transform: scaleY(1.0)

}

}

</style>

</head>

<body>

<div class="spinner">

<div class="rect1"></div>

<div class="rect2"></div>

<div class="rect3"></div>

<div class="rect4"></div>

<div class="rect5"></div>

</div>

</body>

</html>

1、在body中用onload:

<body onload="myfunction()">

2、在脚本中用window.onload:

<script type="text/javascript">function myfun(){alert("this window.onload")}/*用window.onload调用myfun()*/window.onload=myfun//不要括号</script>

下面这个例子在页面完成加载之后改变id_1的背景颜色。

<script language="javascript" >function myfun() {document.getElementById("id_1").style.background= "#000"// 改变背景颜色}// 用js实现在加载完成一个页面后自动执行一个方法/*用window.onload调用myfun()*/window.onload=myfun//不要括号</script>

在html5中video元素的preload属性用于当视频加载时显示播。根据相关网站查询得知,preload属性,主要用于设置视频在页面加载的过程中,视频是否自动预加载。当设置了preload为“auto”时,视频在打开页面时就开始预加载。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存