首页 前端源码 html css js炫酷时钟动画特效

html css js炫酷时钟动画特效

2023-05-14 16:05:08 前端源码 前端哥 524 89 我要收藏
炫酷时钟动画特效下载地址: https://www.qianduange.cn/index.php/art/download/id/11.html

html css js炫酷时钟动画特效,可供学习参考使用,也可以在自己项目中使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>前端哥-时钟动画特效</title>    <style>		html,body { width: 100%; height: 100%; margin: 0px 0px; padding: 0px 0px;}		body { background-color: #333;}        /*表盘边框*/        .clock {            /* 设置大小 */            width: 400px;            height: 400px;            position: absolute;			left: 0px;			top: 0px;			right: 0px;			bottom: 0px;            margin: auto auto;            /*上边距*/            border-radius: 50%;            /*圆形*/            box-shadow: 0 0 36px rgba(0, 0, 0, .2);            /*表盘阴影*/            background: #fff;            border: 16px solid rgba(102,150,6,1);        }        .dial {            width: 100%;            height: 100%;            position: relative;            position: absolute;            top: 0;            left: 0;        }        .dial div {            width: 0px;            height: 200px;            position: absolute;            left: 200px;            transform: rotate(0deg);            transform-origin: bottom right;        }        .dial div i {            float: left;            margin-top: 20px;            margin-left: -10px;            font-style: normal;            width: 20px;            text-align: center;            font-style: 18px;        }        .dial div:after {            content: "";            position: absolute;            background: rgba(3,129,167,1);            width: 2px;            height: 8px;            left: -1px;        }        .dial div.five:after {            position: absolute;            content: "";            width: 4px;            height: 18px;            left: -2px;            top: 0;            background: rgb(15,199,247);            border-bottom-left-radius: 2px;            border-bottom-right-radius: 2px;        }        /*秒针*/        .second {            width: 1px;            height: 200px;            background: red;            position: absolute;            left: 200px;            /*距离表盘宽度一半*/            margin-top: 30px;            z-index: 10;            transform: rotate(0deg);            transform-origin: center 170px;            /*定位旋转位置*/        }        /*表盘圆红心*/        .second:after {            content: "";            position: absolute;            width: 20px;            height: 20px;            background: red;            border-radius: 50%;            bottom: 20px;            left: -10px;        }        .minute {            width: 2px;            height: 140px;            background: #8b8b8d;            position: absolute;            left: 199px;            margin-top: 60px;            z-index: 9;            transform-origin: center bottom;            transform: rotate(12deg);            animation: minute 60s linear infinite;        }        /*时针        */        .hour {            width: 6px;            height: 100px;            background: #333;            position: absolute;            left: 197px;            margin-top: 100px;            z-index: 8;            border-top-left-radius: 3px;            border-top-right-radius: 3px;            transform: rotate(2deg);            transform-origin: center bottom;            animation: minute 60s linear infinite;        }        /*摆锤*/        .swing {            width: 6px;            height: 80px;            position: absolute;            left: 197px;            top: 400px;            background: #FFFFFF;            z-index: -1;            transform: rotate(-30deg);            transform-origin: 3px top;            animation: swing 1s infinite;        }        .swing:after {            content: "";            position: absolute;            width: 30px;            height: 30px;            background: #FFFFFF;            border-radius: 50%;            bottom: -15px;            left: -12px;        }        @keyframes swing {            0% {                transform: rotate(-30deg);            }            50% {                transform: rotate(30deg);            }            100% {                transform: rotate(-30deg);            }        }    </style></head><body>    <div class="clock">        <div id="dial" class="dial"></div>        <div id="second" class="second"></div>        <div id="minute" class="minute"></div>        <div id="hour" class="hour"></div>        <div class="swing"></div>    </div>    <script>        var dial = document.getElementById("dial");        var secondId = document.getElementById("second");        var minuteId = document.getElementById("minute");        var hourId = document.getElementById("hour");        /*获取当前时间         *         */        var date = new Date();        var hour = date.getHours();        var minute = date.getMinutes();        var second = date.getSeconds();        /*计算页面指针加载时的角度         */        hourDeg = 360 * (hour % 12) / 12;        minuteDeg = 360 * minute / 60;        secondDeg = 360 * second / 60;        hourId.style.transform = "rotate("   hourDeg   "deg)";        minuteId.style.transform = "rotate("   minuteDeg   "deg)";        secondId.style.transform = "rotate("   secondDeg   "deg)";        var Deg = 0;        for (var i = 0; i < 60; i  ) {            var ke = document.createElement("div"); //创建一个div            var hourNum = i / 5; //当为5时            if (hourNum == 0) hourNum = 12;            if (i % 5 == 0) { //大刻度                ke.className = "five";                ke.innerHTML = "<i>"   hourNum   "</i>"            }            ke.style.transform = "rotate("   Deg   "deg)";            dial.appendChild(ke);            Deg  = 6;        }        function loopSecond() {            secondDeg = 360 * second / 60;            baseMinuteDeg = 360 * minute / 60;            baseHourDeg = 360 * (hour % 12) / 12;            minuteDeg = baseMinuteDeg   (6 * second / 60);            hourDeg = baseHourDeg   (30 * minute / 60);            hourId.style.transform = "rotate("   hourDeg   "deg)";            minuteId.style.transform = "rotate("   minuteDeg   "deg)";            secondId.style.transform = "rotate("   secondDeg   "deg)";            second  = 1;            if (second > 60) {                second = 1;                minute  = 1;            }            if (minute == 60) {                minute = 0;                hour  = 1;            }            setTimeout(function(){                loopSecond();            },1000);        }        loopSecond();    </script></body></html>


转载请注明出处或者链接地址:https://www.qianduange.cn/article/11.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!