【求解】CSS3动画loading加载

来源：互联网发布：长沙网络自考编辑：程序博客网时间：2024/05/17 01:49
公司有个项目，里面有个加载动画。本来是这样的。
小绿圆转圈圈，可以想象到吧。
原理挺简单的。小圆是span，放好位置，安置好时间动画就可以。
我见这个挺有意思，改了一下。
小星星和桃心是fontawesome。就是遇到个问题，桃心动画的中心一直在左上角。不知道怎么破，求教。
源代码附上：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>loading</title>    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">    <style>        * {            margin: 0 auto;            background-color: rgb(38, 47, 56);        }        .loading {            position: absolute;            width: 100%;            height: 100%;            }        .loading-effect {            width: 400px;            height: 400px;            position: relative;            margin: 190px auto;        }        .loading-info {            font-size: 2em;            text-align: center;        }        .loading-effect span {            display: inline-block;            width: 20px;            height: 20px;            color: beige;            text-align: center;            line-height: 20px;            position: absolute;            -webkit-animation: load 1.04s ease infinite;        }        @-webkit-keyframes load {            0% {                -webkit-transform: scale(1.2);                opacity: 1;            }            100% {                -webkit-transform: scale(.3);                opacity: 0.5;            }        }        .loading-effect span:nth-child(1) {            left: 0;            top: 50%;            margin-top: -10px;            -webkit-animation-delay: 0.13s;        }        .loading-effect span:nth-child(2) {            left: 50.7px;            top: 50.7px;            -webkit-animation-delay: 0.26s;        }        .loading-effect span:nth-child(3) {            left: 50%;            top: 0;            margin-left: -10px;            -webkit-animation-delay: 0.39s;        }        .loading-effect span:nth-child(4) {            top: 50.7px;            right: 50.7px;            -webkit-animation-delay: 0.52s;        }        .loading-effect span:nth-child(5) {            right: 0;            top: 50%;            margin-top: -10px;            -webkit-animation-delay: 0.65s;        }        .loading-effect span:nth-child(6) {            right: 50.7px;            bottom: 50.7px;            -webkit-animation-delay: 0.78s;        }        .loading-effect span:nth-child(7) {            bottom: 0;            left: 50%;            margin-left: -10px;            -webkit-animation-delay: 0.91s;        }        .loading-effect span:nth-child(8) {            bottom: 50.7px;            left: 50.7px;            -webkit-animation-delay: 1.04s;        }        .loading-effect .loading-content {            color: red;            /* position: absolute; */            left:50%;            top:50%;            font-size: 25em;               }        /*********查询*********/        @media screen and (max-width: 414px) {            * {                margin: 0 auto;                background-color: rgb(38, 47, 56);            }            .loading {                position: absolute;                width: 100%;                height: 100%;            }            .loading-effect {                width: 150px;                height: 150px;                position: relative;                margin: 100px auto;            }            .loading-info {                font-size: 2em;                text-align: center;            }            .loading-effect span {                display: inline-block;                width: 20px;                height: 20px;                color: beige;                text-align: center;                line-height: 20px;                position: absolute;                -webkit-animation: load 1.04s ease infinite;            }            @-webkit-keyframes load {                0% {                    -webkit-transform: scale(1.2);                    opacity: 1;                }                100% {                    -webkit-transform: scale(.3);                    opacity: 0.5;                }            }            .loading-effect span:nth-child(1) {                left: 0;                top: 50%;                margin-top: -10px;                -webkit-animation-delay: 0.13s;            }            .loading-effect span:nth-child(2) {                left: 19px;                top: 19px;                -webkit-animation-delay: 0.26s;            }            .loading-effect span:nth-child(3) {                left: 50%;                top: 0;                margin-left: -10px;                -webkit-animation-delay: 0.39s;            }            .loading-effect span:nth-child(4) {                top: 19px;                right: 19px;                -webkit-animation-delay: 0.52s;            }            .loading-effect span:nth-child(5) {                right: 0;                top: 50%;                margin-top: -10px;                -webkit-animation-delay: 0.65s;            }            .loading-effect span:nth-child(6) {                right: 19px;                bottom: 19px;                -webkit-animation-delay: 0.78s;            }            .loading-effect span:nth-child(7) {                bottom: 0;                left: 50%;                margin-left: -10px;                -webkit-animation-delay: 0.91s;            }            .loading-effect span:nth-child(8) {                bottom: 19px;                left: 19px;                -webkit-animation-delay: 1.04s;            }            .loading-effect .loading-content {                position: relative;                top: 50%;                left: 50%;                font-size: 10em;                color: red;            }        }    </style></head><body>    <div class="loading">        <div class="loading-effect">            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span>                <i class="fa fa-star-o" aria-hidden="true"></i>            </span>            <span class="loading-content">                <i class="fa fa-heartbeat" aria-hidden="true"></i>            </span>        </div>        <div class="loading-info">                    </div>    </div></body></html>
阅读全文
0 0