3D开机动画
时间：08-23来源：作者：点击数：
3D开机动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no"/>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
position: relative;
perspective: 200px;
}
#wrap > .inner{
height: 100%;
position: relative;
transform-style: preserve-3d;
}
#wrap > .inner > img{
height: 30%;
margin-top: -60px;
animation: move 1s infinite;
}
@keyframes move{
from{transform: translate3d(-50%,-50%,0) rotateY(0deg);}
to{transform: translate3d(-50%,-50%,0) rotateY(360deg);}
}
#wrap > .inner > img,#wrap > .inner > p{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<img src="img/load/logo2.png"/>
<p>已加载0%</p>
</div>
</div>
</body>
<script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $pNode = $("p");
var flag = 0;
var images = [];
for (item in imgData) {
images = images.concat(imgData[item])
}
for (var i = 0 ; i<images.length;i++) {
//实现图片的预加载，然后实现loading的百分比
var img = new Image();
img.src = images[i];
img.onload = function(){
flag++;
$pNode.html("已加载"+(Math.round(flag/images.length*100))+"%")
console.log(Math.round(flag/images.length*100))
}
img.onerror = function(){
alert('地址有问题')
}
}
})
</script>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号