CSS 3.0实现迷你钟特效

2020-11-26 15:17:55 浏览数 (1)

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

代码如下：

代码语言：javascript复制
<!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>
特效

0 人点赞