CSS 3.0实现迷你钟特效

越陌度阡

发布于 2020-11-26 15:17:55

5230

发布于 2020-11-26 15:17:55

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

分享一个用CSS 3.0实现的迷你钟的特效，效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS 3.0实现迷你钟特效</title>
    <style>
        body {
            background: #575757;
        }

        div {
            position: absolute;
        }

        #clock {
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

        #clock-outer {
            left: 0;
            top: 0;
            width: 164px;
            height: 164px;
            border: 18px solid #fff;
            border-radius: 200px;
            -webkit-animation: outer 1.4s;
        }

        #clock-inner {
            left: 18px;
            top: 18px;
            width: 164px;
            height: 165px;
            border-radius: 164px;
            background: #e3e3e3;
            box-shadow: inset 0 10px 10px #aaa, 0 40px 45px #000;
            -webkit-transform-origin: center center;
            -webkit-animation: inner 1.8s;
        }

        #clock-center {
            left: 90px;
            top: 90px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 3px 3px #aaa;
            -webkit-animation: outer 1.4s;
        }

        .pointer {
            background: #fff;
            box-shadow: 0 0 5px #ddd;
            -webkit-transform-origin: top center;
            top: 100px;
        }

        .hour {
            width: 12px;
            height: 55px;
            left: 94px;
            border-radius: 14px;
            -webkit-transform: rotate(270deg);
        }

        .minute {
            width: 10px;
            height: 70px;
            left: 95px;
            border-radius: 10px;
            -webkit-transform: rotate(180deg);
        }

        .shadow {
            opacity: 0;
        }

        #pointer-hour-1 {
            -webkit-animation: hour 2.5s;
        }

        #pointer-hour-2 {
            -webkit-animation: hour-shadow .5s 1.4s;
        }

        #pointer-hour-3 {
            -webkit-animation: hour-shadow .5s 1.6s;
        }

        #pointer-hour-4 {
            -webkit-animation: hour-shadow .5s 1.8s;
        }

        #pointer-minute-1 {
            -webkit-animation: minute 2.4s;
        }

        #pointer-minute-2 {
            -webkit-animation: minute-shadow .5s 1.4s;
        }

        #pointer-minute-3 {
            -webkit-animation: minute-shadow .5s 1.6s;
        }

        #pointer-minute-4 {
            -webkit-animation: minute-shadow .5s 1.8s;
        }

        @-webkit-keyframes inner {
            0% {
                -webkit-transform: scale(0);
                opacity: 0;
            }

            70% {
                -webkit-transform: scale(1.05);
            }

            80% {
                -webkit-transform: scale(0.9);
            }

            100% {
                -webkit-transform: scale(1);
                opacity: 1;
            }
        }

        @-webkit-keyframes outer {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes center {
            0% {
                opacity: 0;
            }

            80% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes hour {
            0% {
                opacity: 0;
            }

            70% {
                opacity: 0;
                -webkit-transform: rotate(0);
            }

            100% {
                opacity: 1;
                -webkit-transform: rotate(270deg);
            }
        }

        @-webkit-keyframes minute {
            0% {
                opacity: 0;
            }

            70% {
                opacity: 0;
                -webkit-transform: rotate(0);
            }

            100% {
                opacity: 1;
                -webkit-transform: rotate(180deg);
            }
        }

        @-webkit-keyframes hour-shadow {
            0% {
                opacity: 0;
                -webkit-transform: rotate(0);
            }

            100% {
                opacity: 1;
                -webkit-transform: rotate(270deg);
            }
        }

        @-webkit-keyframes minute-shadow {
            0% {
                opacity: 0;
                -webkit-transform: rotate(0);
            }

            100% {
                opacity: 1;
                -webkit-transform: rotate(180deg);
            }
        }
    </style>

</head>

<body>
    <div id="clock">
        <div id="clock-inner"></div>
        <div id="clock-outer"></div>

        <div id="pointer-hour-4" class="pointer hour shadow"></div>
        <div id="pointer-hour-3" class="pointer hour shadow"></div>
        <div id="pointer-hour-2" class="pointer hour shadow"></div>
        <div id="pointer-hour-1" class="pointer hour"></div>

        <div id="pointer-minute-4" class="pointer minute shadow"></div>
        <div id="pointer-minute-3" class="pointer minute shadow"></div>
        <div id="pointer-minute-2" class="pointer minute shadow"></div>
        <div id="pointer-minute-1" class="pointer minute"></div>

        <div id="clock-center"></div>
    </div>

</body>

</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

特效

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

特效

登录后参与评论

0 条评论

热度

CSS 3.0实现迷你钟特效

CSS 3.0实现迷你钟特效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐