搜索
创作
提问
登录注册
展开

专栏首页大前端（横向跨端 & 纵向全栈）CSS 3.0实现迷你钟特效

CSS 3.0实现迷你钟特效

阅读 480

分享一个用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>

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 3.0实现卡片悬停立体特效

    越陌度阡

  • CSS 3.0实现立体书本特效

    越陌度阡

  • CSS 3.0实现创意点击按钮

    越陌度阡

  • HTML- white-space 和 overflow 两个重要的 CSS 属性

    CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下：

    傅_hc

  • 浏览器亚像素渲染与小数位的取舍

    在响应式项目中，百分比的数值的应用越来越多，比如栅格化布局、背景定位、内边距等。以往对于这种数值，我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长，...

    练小习

  • 前端基础-CSS缩放zoom

    cwl_java

  • 手风琴图片和钢琴导航栏JQ滑动特效

    Dream城堡

  • 浏览器亚像素渲染与小数位的取舍

    腾讯ISUX

  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第七节）

    剽悍一小兔

  • BFC概念和作用，触发条件

    windseek
更多文章

作者介绍

越陌度阡

专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券