console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表盘</title>
</head>
<body>
<div class="clock-wrapper">
    <div class="hour-wrapper">
        <div class="hour"></div>
    </div>
    <div class="min-wrapper">
        <div class="min"></div>
    </div>
    <div class="sec-wrapper">
        <div class="sec"></div>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

.clock-wrapper {
    width: 310px;
    height: 310px;
    position: relative;
    border-radius: 50%;
    border: 5px black solid;
    margin: 50px auto;
    background: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=918556499,3285295027&fm=26&gp=0.jpg") no-repeat
                center center/93% ;
}

.clock-wrapper > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.sec-wrapper {
    width: 90%;
    height: 90%;
    border-radius: 50%;


    animation-name: timeGet;
    animation-duration: 5s;
    animation-timing-function: steps(60);
    animation-iteration-count: infinite;
}

.sec {
    width: 4px;
    height: 50%;
    background-color: red;
    margin: 0 auto;
    overflow: hidden;
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
}

.min-wrapper {
    width: 80%;
    height: 80%;
    border-radius: 50%;

    animation-name: timeGet;
    animation-duration: 300s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.min {
    width: 6px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
}

.hour-wrapper {
    width: 60%;
    height: 60%;
    border-radius: 50%;

    animation-name: timeGet;
    animation-duration: 3600s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.hour {
    width: 8px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
}

/*    设置动画效果*/
@keyframes timeGet {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}