CSS的loading动画效果使用教程

这次给大家带来CSS的loading动画效果使用教程，CSS的loading动画效果使用注意事项有哪些，下面就是实战案例，一起来看一下。

本文介绍了一份纯CSS loading效果代码示例，分享给大家，具体如下：

预览

代码

使用了CSS的keyframes自定义关键帧动画

                                                    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)    }}                    
                    
                
                
                
            
    
    

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

注意事项

注意事项

以上就是CSS的loading动画效果使用教程的详细内容，更多请关注【创想鸟】其它相关文章！