首頁手記 css3繪制某網站loading動畫

css3繪制某網站loading動畫

標簽：

CSS3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*在div中嵌套4个div，设置成四个小球，通过相对父级进行定位，
        对每个小球添加动画，每个动画中小球是以盒子得左上为坐标原点进行位移*/

        .container{
            margin:120px auto;
            width: 300px;
            height: 300px;
            position: relative;
        }
        .circle{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #eeeeee;
            position: absolute;
        }
        #one{
            background-color: #2DCB70;
            left: 0;
            top: 0;
            animation: move1 3s ease-in-out infinite;
        }
        @keyframes move1 {
            0%{transform: translateX(0) translateY(0)}
            50%{transform: translateX(200px) translateY(200px)}
            100%{transform: translateX(0) translateY(0)}
        }
       #two{
            background-color: red;
            right: 0;
            top: 0;
            animation: move2 3s ease-in-out infinite;
        }
        @keyframes move2 {
            0%{transform: translateX(0) translateY(0)}
            50%{transform: translateX(-200px) translateY(200px)}
            100%{transform: translateX(0) translateY(0)}
        }
        #three{
            background-color: yellow;
            left: 0;
            bottom: 0;
            animation: move3 3s ease-in-out infinite;
        }
        @keyframes move3 {
            0%{transform: translateX(0) translateY(0)}
            50%{transform: translateX(200px) translateY(-200px)}
            100%{transform: translateX(0) translateY(0)}
        }
        #four{
            background-color: deepskyblue;
            right: 0;
            bottom: 0;
            animation: move4 3s ease-in-out infinite;
        }
        @keyframes move4 {
            0%{transform: translateX(0) translateY(0)}
            50%{transform: translateX(-200px) translateY(-200px)}
            100%{transform: translateX(0) translateY(0)}
        }
    </style>
</head>
<body>
<div class="container">
    <div class="circle" id="one"></div>
    <div class="circle" id="two"></div>
    <div class="circle" id="three"></div>
    <div class="circle" id="four"></div>
</div>
</body>
</html>

这个动画绘制过程很繁琐，希望各位朋友有简便方法能够分享一下

點擊查看更多內容