使用css3制作时钟动画

最新推荐文章于 2023-05-11 11:27:34 发布

qaqLjj

最新推荐文章于 2023-05-11 11:27:34 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qaqLjj/article/details/83652675

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="sad">
    <div class="ke" id="ke1"></div>
    <div class="ke" id="ke2"></div>
    <div class="ke" id="ke3"></div>
    <div class="ke" id="ke4"></div>
    <div class="ke" id="ke5"></div>
    <div class="ke" id="ke6"></div>
    <div id="biaopan">

        <div id="h"></div>
        <div id="i"></div>
        <div id="s"></div>
    </div>
</div>
</div>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .sad {
        margin: 50px auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid #888888;
        position: relative;

    }

    .ke {
        background-color: #888888;
        width: 8px;
        height: 300px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #ke1, #ke4 {
        width: 10px;
    }

    #ke2 {
        transform: translate(-50%, 0) rotate(30deg);
        /*必须把之前的translate(-50%, 0)加上重新赋值transform属性会把之前的刷新掉 导致旋转中心偏移*/
    }

    #ke3 {
        transform: translate(-50%, 0) rotate(60deg);
    }

    #ke4 {
        transform: translate(-50%, 0) rotate(90deg);
    }

    #ke5 {
        transform: translate(-50%, 0) rotate(120deg);
    }

    #ke6 {
        transform: translate(-50%, 0) rotate(150deg);
    }

    #biaopan {
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        background-color: #fff;
    }

    #h {
        position: absolute;
        width: 6px;
        height: 80px;
        background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 43200s;
        transition-timing-function: linear;
        animation-iteration-count: infinite;
    }

    #i {
        position: absolute;
        width: 4px;
        height: 100px;
        background-color: green;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 3600s;
        transform-origin: 50% 100%;
        animation-iteration-count: infinite;
    }

    #s {
        position: absolute;
        width: 2px;
        height: 120px;
        background-color: hotpink;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 60s;
        transform-origin: 50% 100%;
        /*transition-timing-function: steps(60); 谷歌不支持这么写*/
        animation-iteration-count: infinite;
        /*-webkit-animation-timing-function:steps(60);//指针跳格效果*/
        animation-timing-function: steps(60);

    }

    #biaopan:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        z-index: 200;
    }

    @keyframes clockAnimate {
        from {
            transform: translate(-50%, -100%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -100%) rotate(360deg);
        }
    }

</style>
</body>
</html>

在这里插入图片描述