一份纯CSS loading动画效果代码示例

前端  /  管理员 发布于 7年前   156

本文介绍了一份纯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>div#preload {    margin: auto;    position: fixed;    width: 100%;    height: 100%;    background-color: #fff;    z-index: 9999999}div#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%)}div#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}div#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%}div#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}div#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}div#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>    <div id="preload">        <div class="cssload-loader">    <div class="cssload-inner cssload-one"></div>    <div class="cssload-inner cssload-two"></div>    <div class="cssload-inner cssload-three"></div></div>    </div>    </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    css 实现文字过长自动隐藏功能
    下一条：
    纯 Css 绘制扇形的方法示例

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客