此乃精品

一个非常漂亮的心形 loading加载图

又加 · 4月1日 · 2020年

喜欢的可以直接本地创建一个html即可...

预览图如下

html代码

<!DOCTYPE html>
<html lang="zh">
<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>

<style>*{list-style:none;margin:0;padding:0}#he{align-items:center;/*background-color:#232e6d;*/background-image:linear-gradient(to right,#f9ffd1,#a9e6de);display:flex;height:100vh;justify-content:center}ul{height:200px}li{border-radius:20px;float:left;height:20px;margin-right:10px;width:20px}li:first-child{animation:love1 4s infinite;background-color:#f62e74}li:nth-child(2){animation:love2 4s infinite;animation-delay:.15s;background-color:#f45330}li:nth-child(3){animation:love3 4s infinite;animation-delay:.3s;background-color:#ffc883}li:nth-child(4){animation:love4 4s infinite;animation-delay:.45s;background-color:#30d268}li:nth-child(5){animation:love5 4s infinite;animation-delay:.6s;background-color:#006cb4}li:nth-child(6){animation:love4 4s infinite;animation-delay:.75s;background-color:#784697}li:nth-child(7){animation:love3 4s infinite;animation-delay:.9s;background-color:#ffc883}li:nth-child(8){animation:love2 4s infinite;animation-delay:1.05s;background-color:#f45330}li:nth-child(9){animation:love1 4s infinite;animation-delay:1.2s;background-color:#f62e74}@keyframes love1{30%,50%{height:60px;transform:translateY(-30px)}75%,to{height:20px;transform:translateY(0)}}@keyframes love2{30%,50%{height:125px;transform:translateY(-62.5px)}75%,to{height:20px;transform:translateY(0)}}@keyframes love3{30%,50%{height:160px;transform:translateY(-75px)}75%,to{height:20px;transform:translateY(0)}}@keyframes love4{30%,50%{height:180px;transform:translateY(-60px)}75%,to{height:20px;transform:translateY(0)}}@keyframes love5{30%,50%{height:190px;transform:translateY(-45px)}75%,to{height:20px;transform:translateY(0)}}</style>
</head>
<body>
    <div id="he">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
0 条回应