CSS的loading动画效果使用教程

2020-11-27 来源：赴品旅游
这次给大家带来CSS的loading动画效果使用教程，CSS的loading动画效果使用注意事项有哪些，下面就是实战案例，一起来看一下。
本文介绍了一份纯CSS loading效果代码示例，分享给大家，具体如下：
预览
代码
使用了CSS的keyframes自定义关键帧动画
<!DOCTYPE html> 
<html lang="en"> 
 <head>
 <title>Loading</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 p#preload {
 margin: auto;
 position: fixed;
 width: 100%;
 height: 100%;
 background-color: #fff;
 z-index: 9999999
}
p#preload>img { 
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%)
}
p#preload .cssload-loader { 
 position: absolute;
 left: 0;
 right: 0;
 margin: auto;
 width: 62px;
 height: 62px;
 top: 50%;
 margin-top: -31px;
 border-radius: 50%;
 -o-border-radius: 50%;
 -ms-border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 perspective: 780px
}
p#preload .cssload-inner { 
 position: absolute;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border-radius: 50%;
 -o-border-radius: 50%;
 -ms-border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%
}
p#preload .cssload-inner.cssload-one { 
 left: 0;
 top: 0;
 animation: cssload-rotate-one 1.15s linear infinite;
 -o-animation: cssload-rotate-one 1.15s linear infinite;
 -ms-animation: cssload-rotate-one 1.15s linear infinite;
 -webkit-animation: cssload-rotate-one 1.15s linear infinite;
 -moz-animation: cssload-rotate-one 1.15s linear infinite;
 border-bottom: 3px solid #000
}
p#preload .cssload-inner.cssload-two { 
 right: 0;
 top: 0;
 animation: cssload-rotate-two 1.15s linear infinite;
 -o-animation: cssload-rotate-two 1.15s linear infinite;
 -ms-animation: cssload-rotate-two 1.15s linear infinite;
 -webkit-animation: cssload-rotate-two 1.15s linear infinite;
 -moz-animation: cssload-rotate-two 1.15s linear infinite;
 border-right: 3px solid #000
}
p#preload .cssload-inner.cssload-three { 
 right: 0;
 bottom: 0;
 animation: cssload-rotate-three 1.15s linear infinite;
 -o-animation: cssload-rotate-three 1.15s linear infinite;
 -ms-animation: cssload-rotate-three 1.15s linear infinite;
 -webkit-animation: cssload-rotate-three 1.15s linear infinite;
 -moz-animation: cssload-rotate-three 1.15s linear infinite;
 border-top: 3px solid #000
}
@keyframes cssload-rotate-one {
 0% {
 transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
 }
 100% {
 transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
 }
}
@-o-keyframes cssload-rotate-one {
 0% {
 -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
 }
 100% {
 -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
 }
}
@-ms-keyframes cssload-rotate-one {
 0% {
 -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
 }
 100% {
 -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
 }
}
@-webkit-keyframes cssload-rotate-one {
 0% {
 -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
 }
 100% {
 -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
 }
}
@-moz-keyframes cssload-rotate-one {
 0% {
 -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
 }
 100% {
 -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
 }
}
@keyframes cssload-rotate-two {
 0% {
 transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
 }
 100% {
 transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
 }
}
@-o-keyframes cssload-rotate-two {
 0% {
 -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
 }
 100% {
 -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
 }
}
@-ms-keyframes cssload-rotate-two {
 0% {
 -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
 }
 100% {
 -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
 }
}
@-webkit-keyframes cssload-rotate-two {
 0% {
 -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
 }
 100% {
 -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
 }
}
@-moz-keyframes cssload-rotate-two {
 0% {
 -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
 }
 100% {
 -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
 }
}
@keyframes cssload-rotate-three {
 0% {
 transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
 }
 100% {
 transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
 }
}
@-o-keyframes cssload-rotate-three {
 0% {
 -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
 }
 100% {
 -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
 }
}
@-ms-keyframes cssload-rotate-three {
 0% {
 -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
 }
 100% {
 -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
 }
}
@-webkit-keyframes cssload-rotate-three {
 0% {
 -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
 }
 100% {
 -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
 }
}
@-moz-keyframes cssload-rotate-three {
 0% {
 -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
 }
 100% {
 -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
 }
}
 </style>
 </head>
 <body>
 <p id="preload">
 <p class="cssload-loader">
 <p class="cssload-inner cssload-one"></p>
 <p class="cssload-inner cssload-two"></p>
 <p class="cssload-inner cssload-three"></p>
 </p>
 </p>
 </body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
全部栏目

CSS的loading动画效果使用教程
