时钟练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟练习</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #2c3e50;
            width: 100vw;
            height: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            position: relative;
        }
        .clock{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: linear-gradient(to right,#f1c40f,#e67e22,#e74c3c);
            position: relative;
            z-index: -2;
        }
        .clock::after{
            content: '';
            position: absolute;/*参照父级*/
            width: 90%;
            height: 90%;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            background: #2c3e50;
            z-index: -1;
        }
        .line{
            position: absolute;
            left: 50%;
            top: 50%;
            width: 80%;
            height: 80%;
            transform: translate(-50%,-50%);/*居中*/
            border-radius: 50%;
            /* background: #000; */
        }
        .line::before{
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 90%;
            height: 90%;
            background: #2c3e50;
            border-radius: 50%;
            z-index: 2;
        }
        .line::after{
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 20px;
            height: 20px;
            background: #FFF;
            border-radius: 50%;
            z-index: 2;
        }
        .line>div{
            width: 8px;
            background: #fff;
            height: 100%;
            position: absolute;
            left: 50%;
        }
        .line>div:nth-of-type(1){
            transform: translateX(-50%) rotate(0deg);
        }
        .line>div:nth-of-type(2){
            transform:translateX(-50%)  rotate(30deg);
        }
        .line>div:nth-of-type(3){
            transform:translateX(-50%) rotate(60deg);
        }
        .line>div:nth-of-type(4){
            transform:translateX(-50%)  rotate(90deg);
        }
        .line>div:nth-of-type(5){
            transform:translateX(-50%)  rotate(120deg);
        }
        .line>div:nth-of-type(6){
            transform:translateX(-50%)  rotate(150deg);
        }
        .hour{
            width: 8px;
            background: #fff;
            height: 15%;
            position: absolute;
            bottom: 50%;
            transform: translate(-50%);
            transform-origin: bottom;
            transition: 30s;
            left: 50%;
        }
        .minute{
            width: 8px;
            background: #fff;
            height: 15%;
            position: absolute;
            bottom: 50%;
            transform: translate(-50%) rotate(60deg);
            transform-origin: bottom;
            transition: 20s;
            left: 50%;
        }
        .second{
            width: 1px;
            background: #fff;
            height: 35%;
            position: absolute;
            bottom: 50%;
            transform: translate(-50%)  rotate(90deg);
            transform-origin: bottom;
            left: 50%;
            transition: 10s;
        }
        main:hover .second{
            transform: translate(-50%)  rotate(1080deg);
        }
        main:hover .minute{
            transform: translate(-50%)  rotate(360deg);
        }
        main:hover .hour{
            transform: translate(-50%)  rotate(180deg);
        }
    </style>
</head>
<body>
    
    <main>
        <div class="clock">
            <div class="line">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </main>
</body>
</html>

 

点赞

发表评论