您的位置：首页 > Web前端 > CSS

css3 开机/加载动画 2D/3D效果

2019-02-13 20:45 218 查看

2D开机/加载动画：

<!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">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
position: relative;
background: gray;
}
#wrap > .inner{
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
white-space: nowrap;
}
#wrap > .inner >span{
position: relative;
/*animation: move 1s linear infinite alternate;*/
}

@keyframes move{
from{
top: 0px;
}
to{
top: -10px;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<span>正</span>
<span>在</span>
<span>加</span>
<span>载</span>
<span>...</span>

</div>
</div>
</body>
<script type="text/javascript">

window.onload=function(){
var spanNodes = document.querySelectorAll("#wrap > .inner >span");
var colors=["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink","#1883BA"];
for(var i=0;i<spanNodes.length;i++){
spanNodes[i].style.animation="move .3s "+(i*50)+"ms linear infinite alternate";
spanNodes[i].style.color=colors[i];
}
}

</script>
</html>

3D开机/加载动画

<!DOCTYPE html>
<html>

23ff8
<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">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
position: relative;
background: pink;
perspective: 200px;
}
#wrap > .inner{
height: 100%;
position: relative;
transform-style: preserve-3d;
}
@keyframes move{
from{
transform: translate3d(-50%,-50%,0) rotateY(0deg);
}
to{
transform: translate3d(-50%,-50%,0) rotateY(360deg);
}
}

#wrap > .inner > img{
width: 10%;
margin-top: -38px;
animation: move 2s linear infinite ;
}
#wrap > .inner > img,#wrap > .inner > p{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0) rotateY(0deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<img src="img/load/logo2.png"  />
<p>已加载0%</p>
</div>
</div>
</body>
<script src="js/data.js"></script>
<script type="text/javascript">
window.onload=function(){
var pNode = document.querySelector("#wrap > .inner > p");
var flag = 0;
var arr=[];
for(item in imgData){
arr=arr.concat(imgData[item]);
}

for(var i=0;i<arr.length;i++){
var img = new Image();
//ajax请求
img.src=arr[i];
img.onload=function(){
flag++;
pNode.innerHTML="已加载"+(Math.round(flag/arr.length*100))+"%";
}
img.onerror=function(){
console.log("地址有问题")
}
}

}
</script>
</html>

data.js

var imgData = {
logo:[
"img/load/logo2.png",
"img/load/logo3.png",
"img/load/logo4.png"
],
logoIco:[
"img/load/loadIco1.png",
"img/load/loadIco2.png",
"img/load/loadIco3.png",
"img/load/loadIco4.png",
"img/load/loadIco5.png",
"img/load/loadIco6.png",
"img/load/loadIco7.png",
"img/load/loadIco8.png",
"img/load/loadIco9.png"
],
clound:[
"img/bg/cloud1.png",
"img/bg/cloud2.png",
"img/bg/cloud3.png"
],
pageBg:["img/bg/bg.jpg"],
bg:[
"img/bg/1.png",
"img/bg/2.png",
"img/bg/3.png",
"img/bg/4.png",
"img/bg/5.png",
"img/bg/6.png",
"img/bg/7.png",
"img/bg/8.png",
"img/bg/9.png",
"img/bg/10.png",
"img/bg/11.png",
"img/bg/12.png",
"img/bg/13.png",
"img/bg/14.png",
"img/bg/15.png",
"img/bg/16.png",
"img/bg/17.png",
"img/bg/18.png",
"img/bg/19.png",
"img/bg/20.png"
],
pano:[
"img/pano/p1-1.png",
"img/pano/p1-2.png",
"img/pano/p2-1.png",
"img/pano/p2-2.png",
"img/pano/p2-3.png",
"img/pano/p3-1.png",
"img/pano/p3-2.png",
"img/pano/p3-3.png",
"img/pano/p3-4.png",
"img/pano/p4-1.png",
"img/pano/p4-2.png",
"img/pano/p4-3.png",
"img/pano/p4-4.png",
"img/pano/p4-5.png",
"img/pano/p5-1.png",
"img/pano/p5-2.png",
"img/pano/p5-3.png",
"img/pano/p5-4.png",
"img/pano/p5-5.png",
"img/pano/p5-6.png",
"img/pano/p6-1.png",
"img/pano/p6-2.png",
"img/pano/p6-3.png",
"img/pano/p6-4.png",
"img/pano/p6-5.png",
"img/pano/p6-6.png",
"img/pano/p7-1.png",
"img/pano/p7-2.png",
"img/pano/p7-3.png",
"img/pano/p8-1.png",
"img/pano/p8-2.png",
"img/pano/p8-3.png",
"img/pano/p8-4.png",
"img/pano/p8-5.png",
"img/pano/p8-6.png"
]
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航