CSS3 炫酷的时钟制作

最新推荐文章于 2024-01-19 17:49:20 发布
最新推荐文章于 2024-01-19 17:49:20 发布
阅读量339 收藏
点赞数
分类专栏： css 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121643505
版权

  时钟制作效果：

1.png

       首先你要知道时钟的运行规律（虽然大部分人都知道），然后给三个针制作符合自身运动规律的动

画，这里需要用到定时器，但是如果只需要像定时器一样可刷新，用infinit也行。其次是针的摆放需要应用到

transform-origin这一属性

transform-origin: x-axis y-axis z-axis;
值描述
x-axis

定义视图被置于 X 轴的何处。可能的值：

  • left

  • center

  • right

  • length

  • %

y-axis

定义视图被置于 Y 轴的何处。可能的值：

  • top

  • center

  • bottom

  • length

  • %

z-axis

定义视图被置于 Z 轴的何处。可能的值：

  • length

上面是w3school中transform-origin的详解

布局部分：

<body>
    <div class="clock-wrap">
        <div class="clock">
            <ul id="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="num" id="num">
            <ul>
                <li>12</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
            </ul>
        </div>
        <div class="hour" id="hour" style="transform: rotate(12deg);"></div>
        <div class="min" id="min" style="transform: rotate(18deg);"></div>
        <div class="sec" id="sec" style="transform: rotate(150deg);"></div>
        <div class="circle"></div>
    </div>

样式部分：

<style>
        .hour,.min,.sec{
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: bottom;
            box-shadow: 0 0 6px rgb(0 0 0 /50%);
        }
        body{
            font: 1px "微软雅黑";
            color: #666;
            background-color: #333;
            display: block;
        }
        body, ul{
            margin: 0;
            padding: 0;
        }
        *{
            margin: 0;
            padding:0;
        }
        .clock-wrap{
            width: 400px;
            height: 400px;
            border: 10px solid #fff;
            border-radius: 50%;
            margin: 80px auto 0;
            position: relative;
            box-shadow:0 0 40px rgba(0, 0, 0) ;
        }
        .clock ul{
            width: 400px;
            height: 400px;
            position: relative;
            border-radius: 50%;
            background: radial-gradient(circle at center,rgb(14, 14, 51),#000000);
            box-shadow: 0  0  50px  rgba(0, 0, 0 /50%) inset;
        }
        .clock li:nth-child(5n+1){
            height: 18px;
        }
        .clock ul li{
            position: absolute;
            left: 50%;
            margin-left: -2px;
            top: 0;
            width: 4px;
            height: 10px;
            background: rgba(255, 255, 255,50%);
            transform-origin: center 200px;
        }
        li{
            list-style: none;
        }
        li{
            display: list-item;
            text-align:-webkit-match-parent;
        }
        ul{
            list-style-type: disc;
        }
        .num{
            position: absolute;
            width: 360px;
            height: 360px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .num li{
            position: absolute;
            left: 50%;
            margin-left: -10px;
            top: 0;
            color: rgba(255, 255, 255, 50%);
            font: 2em Arial, Helvetica, sans-serif;
            transform-origin: center 180px;
        }
        .hour{
            width: 14px;
            height: 100px;
            margin-left: -7px;
            margin-top: -100px;
            border-radius: 3px;
        }
        .min{
            width: 10px;
            height: 150px;
            margin-left: -5px;
            margin-top: -150px;
            border-radius: 2px;
        }
        .sec{
            width: 4px;
            height: 180px;
            margin-left: -2px;
            margin-top: -180px;
            border-radius: 1px;
        }
        .circle{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            left: 50%;
            margin-left: -20px;
            top: 50%;
            margin-top: -20px;
            box-shadow: 0 0 20px  rgba(0, 0, 0 /40%);
        }
        .clock li:nth-child(1){transform: rotate(0deg);}
        .clock li:nth-child(2){transform: rotate(6deg);}
        .clock li:nth-child(3){transform: rotate(12deg);}
        .clock li:nth-child(4){transform: rotate(18deg);}
        .clock li:nth-child(5){transform: rotate(24deg);}
        .clock li:nth-child(6){transform: rotate(30deg);}
        .clock li:nth-child(7){transform: rotate(36deg);}
        .clock li:nth-child(8){transform: rotate(42deg);}
        .clock li:nth-child(9){transform: rotate(48deg);}
        .clock li:nth-child(10){transform: rotate(54deg);}
        .clock li:nth-child(11){transform: rotate(60deg);}
        .clock li:nth-child(12){transform: rotate(66deg);}
        .clock li:nth-child(13){transform: rotate(72deg);}
        .clock li:nth-child(14){transform: rotate(78deg);}
        .clock li:nth-child(15){transform: rotate(84deg);}
        .clock li:nth-child(16){transform: rotate(90deg);}
        .clock li:nth-child(17){transform: rotate(96deg);}
        .clock li:nth-child(18){transform: rotate(102deg);}
        .clock li:nth-child(19){transform: rotate(108deg);}
        .clock li:nth-child(20){transform: rotate(114deg);}
        .clock li:nth-child(21){transform: rotate(120deg);}
        .clock li:nth-child(22){transform: rotate(126deg);}
        .clock li:nth-child(23){transform: rotate(132deg);}
        .clock li:nth-child(24){transform: rotate(138deg);}
        .clock li:nth-child(25){transform: rotate(144deg);}
        .clock li:nth-child(26){transform: rotate(150deg);}
        .clock li:nth-child(27){transform: rotate(156deg);}
        .clock li:nth-child(28){transform: rotate(162deg);}
        .clock li:nth-child(29){transform: rotate(168deg);}
        .clock li:nth-child(30){transform: rotate(174deg);}
        .clock li:nth-child(31){transform: rotate(180deg);}
        .clock li:nth-child(32){transform: rotate(186deg);}
        .clock li:nth-child(33){transform: rotate(192deg);}
        .clock li:nth-child(34){transform: rotate(198deg);}
        .clock li:nth-child(35){transform: rotate(204deg);}
        .clock li:nth-child(36){transform: rotate(210deg);}
        .clock li:nth-child(37){transform: rotate(216deg);}
        .clock li:nth-child(38){transform: rotate(222deg);}
        .clock li:nth-child(39){transform: rotate(228deg);}
        .clock li:nth-child(40){transform: rotate(234deg);}
        .clock li:nth-child(41){transform: rotate(240deg);}
        .clock li:nth-child(42){transform: rotate(246deg);}
        .clock li:nth-child(43){transform: rotate(252deg);}
        .clock li:nth-child(44){transform: rotate(258deg);}
        .clock li:nth-child(45){transform: rotate(264deg);}
        .clock li:nth-child(46){transform: rotate(270deg);}
        .clock li:nth-child(47){transform: rotate(276deg);}
        .clock li:nth-child(48){transform: rotate(282deg);}
        .clock li:nth-child(49){transform: rotate(288deg);}
        .clock li:nth-child(50){transform: rotate(294deg);}
        .clock li:nth-child(51){transform: rotate(300deg);}
        .clock li:nth-child(52){transform: rotate(306deg);}
        .clock li:nth-child(53){transform: rotate(312deg);}
        .clock li:nth-child(54){transform: rotate(318deg);}
        .clock li:nth-child(55){transform: rotate(324deg);}
        .clock li:nth-child(56){transform: rotate(330deg);}
        .clock li:nth-child(57){transform: rotate(336deg);}
        .clock li:nth-child(58){transform: rotate(342deg);}
        .clock li:nth-child(59){transform: rotate(348deg);}
        .clock li:nth-child(60){transform: rotate(354deg);}
        .num li:nth-child(1){transform: rotate(0deg);}
        .num li:nth-child(2){transform: rotate(30deg);}
        .num li:nth-child(3){transform: rotate(60deg);}
        .num li:nth-child(4){transform: rotate(90deg);}
        .num li:nth-child(5){transform: rotate(120deg);}
        .num li:nth-child(6){transform: rotate(150deg);}
        .num li:nth-child(7){transform: rotate(180deg);}
        .num li:nth-child(8){transform: rotate(210deg);}
        .num li:nth-child(9){transform: rotate(240deg);}
        .num li:nth-child(10){transform: rotate(270deg);}
        .num li:nth-child(11){transform: rotate(300deg);}
        .num li:nth-child(12){transform: rotate(330deg);}
    </style>

脚本部分：

<script>
      window.onload=function(){
    var oList=document.getElementById("list");
    var oCSS=document.getElementById("css"); //style标签也可以加id属性。
    var aNums=document.getElementById("num").getElementsByTagName("li");
    var oHour=document.getElementById("hour");
    var oMin=document.getElementById("min");
    var oSec=document.getElementById("sec");
    var aLi="";
    var sCSS="";
    for(var i=0;i<60;i++){ //循环60次，产生刻度值和每一个刻度旋转的度数。
        aLi+="<li></li>";
        sCSS+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"
        }
    for(var i=0;i<12;i++){
        sCSS+="#num li:nth-child("+(i+1)+"){transform:rotate("+i*30+"deg);}"
        }
    oList.innerHTML=aLi;
    oCSS.innerHTML+=sCSS;  //css需要追加到原来的css文档中。
    myTime();  //初始化函数。
    setInterval(myTime,1000);    //设置定时器，每隔1秒执行一次函数。
    function myTime(){
        var oDate=new Date();
        var iSec=oDate.getSeconds();
        //精确到秒数的分钟数。
        var iMin=oDate.getMinutes()+iSec/60;
        //精确到分秒的小时数。可以在旋转的时候更精确。
        var iHour=oDate.getHours()+iMin/60;
       
        oSec.style.transform="rotate("+iSec*6+"deg)" ;
        oMin.style.transform="rotate("+iMin*6+"deg)";
        oHour.style.transform="rotate("+iHour*30+"deg)"; //时针的指向需要把分钟和秒数算进去才精确。
        }
    }
    </script>

huxiaoxiao.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 绘制一个时钟
老司机的后备箱
05-24 2477
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ 你也可以访问这个 CSS clock或者以下代码片段查看实际效果 CSS clock CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度 提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器 <clock></clock> 加上一点锥形渐变 clock{
前端实现炫酷动感时钟特效
君_陌的博客
04-04 3189
主要用到原生态的 JS+CSS3。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ backgr...
CSS动画篇之炫酷时钟之时钟墙
南城
05-07 584
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 前言 看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。 实现过程 HTML 当你仔细看这个动图的时候可以看出我们可以
CSS时钟案例
xiaomohhh的博客
08-14 1862
效果如果图下 下面是html代码 <div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1378
Document
css3时钟制作圆形时钟代码
11-10
在本主题中，我们将深入探讨如何使用CSS3来创建一个圆形的动态时钟。这个时钟不仅美观，而且能够实时更新时间，为网页增添互动性。 首先，我们需要一个HTML结构来承载时钟。一个简单的HTML布局可能包括一个`<div>`...
CSS3制作360度旋转时钟表特效代码
03-20
**CSS3制作360度旋转时钟表特效详解** 在现代网页设计中，CSS3已经成为了一种不可或缺的工具，它提供了丰富的样式控制和动画效果，使得网页元素的表现力大大增强。本篇将深入探讨如何利用CSS3来制作一个360度旋转的...
CSS3制作360度旋转时钟表
04-06
在本项目中，我们主要探讨如何使用CSS3技术来创建一个360度旋转的时钟表。CSS3是 Cascading Style Sheets（层叠样式表）的第三个版本，它引入了许多增强功能，使得网页设计更加动态和交互。在这个时钟表的实现中，...
js基于css3制作的圆形虚线时钟特效
06-11
"js基于css3制作的圆形虚线时钟特效"就是一个很好的例子，它将JavaScript与CSS3结合，为用户呈现了一款实时更新的时钟界面。下面我们将详细讨论这个特效背后涉及的技术和实现方法。 首先，我们来看CSS3在其中的作用...
Css3+Js制作漂亮时钟(附源码)
09-25
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个美观的时钟。这个时钟设计兼容多种浏览器，包括IE9、Google Chrome、Firefox和Safari。通过学习这个案例，你可以了解如何结合这两门技术来创建动态且...
创意炫酷圆盘时钟
12-10
创意炫酷圆盘时钟
抖音超火的罗马时钟数字时钟
09-23
抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行
基于 css 版时钟
09-01
利用css 做的时钟
css制作炫酷的罗盘时钟特效（附代码）
z1093541823的博客
04-19 4057
炫酷的罗盘时钟特效； 可以直接使用；
利用HTML+CSS+JS打造炫酷时钟网页的完整指南
最新发布
奇遇少年
01-19 3024
如何使用HTML、CSS和JavaScript来创建一个炫酷的时钟网页。
svg动画时钟
weixin_45732235的博客
05-24 402
⭐️实现效果 源码下载 ☁️源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
一个酷炫的时钟
CoderZ的博客
03-15 2120
不多说，直接上代码： MainActivity： package com.example.archermind.xiaomi; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity {
炫酷的时钟效果
叶已初秋的博客
06-12 8971
前言： 最近在抖音上看到一个炫酷的时钟旋转效果，本人是做Android的，闲来无事搞一下网页，这个时钟可以当壁纸，隔壁的妹子都看呆了，哈哈，这里只是截图不是动态gif 一：效果图 二：实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
用css3画布画出时钟，并让时间动起来
05-25
以下是一个用CSS3画布制作的时钟，并让时间动起来的示例代码： HTML代码： ```html <canvas id="canvas" width="200" height="200"></canvas> ``` CSS代码： ```css .clock { width: 200px; height: 200px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值