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;
    }
    .loader{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
         border-radius: 50%;
        overflow: hidden;
        animation: animate .5s linear infinite;
    }
    @keyframes animate {
        0%{
            transform:translate(-50%,-50%) rotate(359deg);
        }
        100%{
            transform:translate(-50%,-50%) rotate(0deg);
        }
    }
    .loader span{
        position: absolute;
        width: 100%;
        height: 100%;
         border-radius: 50%;
        left: 50%;
        transform-origin: left;
    }

    .loader span:nth-child(1){
        background-color: #fea503;
        transform: rotate(0deg);
        z-index: 2;
    }
    .loader span:nth-child(2){
        background-color: #ffd203;
        transform: rotate(60deg);
        z-index: 3;
    }
    .loader span:nth-child(3){
        background-color: #54cd28;
        transform: rotate(120deg);
        z-index: 4;
    }
    .loader span:nth-child(4){
        background-color: #129cf5;
        transform: rotate(180deg);
        z-index: 5;
    }

    .loader span:nth-child(5){
        background-color: #bb5ed3;
        transform: rotate(240deg);
        z-index: 6;
    }
    .loader span:nth-child(6){
        background-color: #ff4f45;
        transform: rotate(300deg);
        z-index: 7;
        overflow: hidden;
    }
    .loader span:nth-child(6):before{
        content: '';
        position: absolute;
        top: 45px;
        left: -72px;
        width: 100%;
        height: 100%;
        background: #ffd203;
        border-radius: 50%;
        z-index: 2;
    }
    .loader span:nth-child(6):after{
        content: '';
        position: absolute;
        top: 42px;
        left: -23px;
        width: 100%;
        height: 100%;
        background: #fea503;
        border-radius: 50%;

    }
</style>
<body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>