css3+js制作好看的时钟效果

最新推荐文章于 2021-06-27 09:15:50 发布
最新推荐文章于 2021-06-27 09:15:50 发布
阅读量239 收藏
点赞数
分类专栏： 前端开发 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33794744/article/details/107915614
版权

css3+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>
    body{background-color: #A9D4D5;}
    /*表盘边框*/
    .clock {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      /* transform: skew(0deg,10deg); */
      /* transform:scale(0.6); */
      /* 倾斜的原点 */
      transform-origin: center; 
      /* 设置大小 */
      width: 130px;
      height: 130px;
      position: relative;
      margin: 40px auto auto auto;
      /*上边距*/
      border-radius: 50%;
      /*表盘阴影*/
      background: #fff;
      border: 10px solid #d9d9d9;
      background: #eee;
      background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5);
      background-image: linear-gradient(to bottom right, #eee, #f5f5f5);
      box-shadow: 20px 20px 30px -10px rgba(0, 0, 0, 0.4), inset 10px 10px 20px rgba(0, 0, 0, 0.2);
    }

    .dial {
      width: 100%;
      height: 100%;
      position: relative;
      left: 0;
      top: 0;
    }

    .dial div {
      width: 0px;
      height: 82px;
      position: absolute;
      left: 65px;
      top: -15px;
      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-size: 11px;
    }

    /* .dial div:after {
            content: "";
            position: absolute;
            background: #333;
            width: 2px;
            height: 8px;
            left: -1px;

        } */

    /* .dial div.five:after {
            position: absolute;
            content: "";
            width: 4px;
            height: 10px;
            left: -2px;
            top: 0;
            background: rgb(15,199,247);
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
        } */
    .clock:after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      border-radius: 50%;
      z-index: 9999;
      background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
    }

    /*秒针*/
    .second {
      height: 60px;
      width: 8px;
      -webkit-transform: translate(-50%, -100%) rotate(60deg);
      transform: translate(-50%, -100%) rotate(60deg);
      z-index: 3;
      background: red;
    }

    .second .body {
      display: block;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      background: red;
      z-index: 4;
    }

    .arm.arm-second:after {
      -webkit-animation: moveShadow 60s linear infinite;
      animation: moveShadow 60s linear infinite;
    }

    .second:before {
      border-width: 10px 4px 41px;
      border-bottom-color: red !important;
      z-index: -1;
    }

    .arms {
      position: absolute;
      top: 45%;
      left: 50%;
    }

    /*表盘圆心*/
    .arms:after {
      display: block;
      position: absolute;
      top: 4px;
      left: 50%;
      width: 12px;
      height: 12px;
      content: "";
      background: #ccc;
      border-radius: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    .arm {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 5px;
      width: 4px;
      content: "";
      background: black;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
      border-radius: 0 0 20px 20px;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      z-index: 4;
    }

    .arm:before {
      display: block;
      position: absolute;
      top: -50px;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-width: 10px 2px 41px;
      border-bottom-color: black;
      content: "";
    }

    .arm:after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 40%;
      height: calc(100% + 50px);
      /* background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent 70%);
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 70%); */
      z-index: 1;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }

    /* 分针 */
    .minute {
      animation: minute 60s linear infinite;
    }

    /*时针
        */
    .hour {
      animation: minute 60s linear infinite;
      /* transform: translate(-50%, -100%) rotate(30deg); */
      height: 0px !important;
      top: 5px;
    }

    /*摆锤*/
    .swing {
      width: 6px;
      height: 80px;
      position: absolute;
      left: 197px;
      top: 400px;
      background: #137fe4;
      z-index: -1;
      transform: rotate(-30deg);
      transform-origin: 3px top;
      animation: swing 1s infinite;
    }

    .swing:after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background: #137fe4;
      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 class="arms">
      <div id="second" class="arm second">
        <div class="body"></div>
      </div>
      <div id="minute" class="arm minute"></div>
      <div id="hour" class="arm hour"></div>
    </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.cruijun.com/

飞鱼日记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS漂亮时钟
04-24
JS漂亮时钟
Css3+Js制作漂亮时钟(附源码)
09-25
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个美观的时钟。这个时钟设计兼容多种浏览器，包括IE9、Google Chrome、Firefox和Safari。通过学习这个案例，你可以了解如何结合这两门技术来创建动态且...
Css3+Js 漂亮时钟
iteye_8029的博客
04-24 190
Css3+Js 漂亮时钟 浏览器支持 IE9/GoogleChrome/FireFox/Safari 效果图： 代码下载：http://download.csdn.net/detail/guoxuepeng123/5293759 HTML代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta &gt; ...
漂亮的CSS时钟
immocha的博客
03-20 873
想到很多年前，我还是个初出茅庐的前端，只会Table切图，HTML+CSS，去面试一家公司的前端，技术面试让我说说setInterval和setTimeout，当时我说 “没用过…”，结果当然game over 很多年过去了，我也算用过了。 时间不止，步履不停。 主要使用transform rotate，通过设置transform-origin来确定旋转的中心位置。 因为加了数字，所以看起来有点...
漂亮的时钟（JS）
web_php的专栏
10-11 1075
 pX=400;pY=200obs = new Array(13)function ob () {for (i=0; i if (document.all) obs[i]=new Array (eval(ob+i).style,-100,-100) else obs[i] = new Array (eval(document.ob+i),-100,-100) }}funct
css搭配js实现简单的时钟效果
lookingForw_4585的博客
09-24 138
简单的时钟效果 先看下效果 代码简单，就不做多于的赘述了，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bp { width: 400p
js+css3制作时钟特效
10-21
本文给大家汇总了2个JavaScript+css3实现的时钟特效的代码，非常的漂亮，有需要的小伙伴可以来参考下
css3时钟制作圆形时钟代码
11-10
css3时钟制作圆形时钟代码 css3时钟制作圆形时钟代码 css3时钟制作圆形时钟代码 css3时钟制作圆形时钟代码
js基于css3制作的圆形虚线时钟特效
06-11
js基于css3制作的圆形虚线时钟特效，一款简单的网页时钟，默认获取本地时间，同时还显示数字时钟、日期和星期。
js+css3圆形指针时钟代码
06-11
这是一款原生js+css3制作的圆形指针时钟代码，简单的网页圆形时钟特效。
漂亮JS时钟 很酷很炫
01-06
漂亮JS时钟 很酷很炫漂亮JS时钟 很酷很炫漂亮JS时钟 很酷很炫
代码实现好看的网页时钟效果
04-24
学编程其实很简单，html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-代码实现网页时钟效果
一个javascript做的时钟
05-31
一个javascript做的时钟请指教
纯CSS3 好看的时钟案列 不需图片素材
m0_52758139的博客
06-27 89
先让我们来看看代码后的效果吧 话不多说 直接上代码开干 如有不懂的可以评论提问哦 <div class="clock"> <ul id="list"> </ul> <div class="hour"></div> <div class="min"></div> <div class="sec"></div> </div> * { marg
说说今天学习的用JS绘制绚丽的时钟效果
yesz12358的博客
08-12 1365
今天又是一天的html5的Canvas属性的学习，然后自己做了一个小demo,绘制了一个绚丽的带有动画效果的时钟。 废话不多说，先贴图，大家感受下： 上面分别是时分秒，时间走动，只有某个数字改变了，组成数字的小圆球们就会变成随机的彩色小球以自由落体运动下落，然后随机朝两边滚动，然后滚到画面外。效果很简单，但实现起来还要结合已学的物理和数学知识。 下面贴上代码。大家可以自己试试
js时钟效果
qq_40052011的博客
04-15 626
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .clock { width: 600px; heig...
网上看到的用JS写的很漂亮的时钟样式
qq_44925149的博客
05-04 895
网上看到的用JS写的很漂亮的时钟样式
CSS3+Jquery制作的动画效果电子表
weixin_30411819的博客
11-24 146
<!DOCTYPE HTML> <html> <head> <title>CSS3+Jquery制作的动画效果电子表丨石家庄网络公司-河北品牌策划公司</title> <style type="text/css"> body{ background:#202020; font:bold 1...
css+js+html时钟
最新发布
08-24
CSS JS HTML时钟是一种使用CSS、JS和HTML技术制作而成的实时显示时间的时钟。它能够实时获取当前系统时间，并将时间以数字、时分秒或者其他样式的形式展示在网页上。 HTML负责页面的结构搭建，通过div、span等标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值