master

分支 (1)

管理

管理

master

css-animation
/
滑动的六边形加载动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background: #7a139a;
    }
    .center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 400px;
        height: 50px;
        background: transparent;
        border-bottom:  4px solid #fff;
        animation: animateLine 5s linear infinite;
    }

    @keyframes animateLine {
        0%{
            transform: translate(-50%,-50%) rotate(30deg);
         }
         25%{
            transform: translate(-50%,-50%) rotate(0deg);
         }
         50%{
            transform: translate(-50%,-50%) rotate(-30deg);
         }
         75%{
            transform: translate(-50%,-50%) rotate(0deg);
         }
         100%{
            transform: translate(-50%,-50%) rotate(30deg);
         }


    }
    .hexagon{
        position: absolute;
        left: 0;
        bottom: 12px;
        width: 50px;
        height: 30px;
        background-color: #fff;
        animation: animate 5s linear infinite;

    }
    @keyframes animate {
        0%{
            transform: rotate(0deg);
            left: 0;
        }
        50%{
            transform: rotate(360deg);
            left: calc(100% - 50px);
        }
        100%{
            transform: rotate(0deg);
            left: 0;
        }

    }
    .hexagon:before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transform: rotate(60deg);
    }
    .hexagon:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transform: rotate(-60deg);
    }
</style>
<body>
    <div class="center">
        <div class="hexagon"></div>
    </div>
</body>
</html>