手写数字时钟源码

最新推荐文章于 2022-12-14 09:20:22 发布
最新推荐文章于 2022-12-14 09:20:22 发布
阅读量151 收藏
点赞数
分类专栏： 前端 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36608036/article/details/123132423
版权
手写数字时钟源码
<!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">
    <title>clock</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,body{
            height: 100%;
        }

        body {
            display: grid;
            place-items: center;
        }
        .clock {
            display: flex;
            align-items: center;
            justify-content: center;
            background:#dde1e7;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            box-shadow: -3px -3px 7px #ffffff73,
            3px 3px 5px rgba(94, 104, 121, 0.288);
        }
        .clock::before {
            position: absolute;
            content: '';
            height: 220px;
            width: 220px;
            background: #dde1e7;
            border-radius: 50%;
            box-shadow: inset -3px -3px 7px #ffffff73,
                        inset 3px 3px 5px rgba(94, 104, 121, 0.288);
        }
        .clock::after {
            position: absolute;
            content: '';
            height: 120px;
            width: 120px;
            background: #dde1e7;
            border-radius: 50%;
            box-shadow: -1px -1px 5px #ffffff73,
                        1px 1px 3px rgba(94, 104, 121, 0.288);
        }
        .clock .center-nut {
            height: 15px;
            width: 15px;
            background: #404040;
            border-radius: 50%;
            z-index: 2;
            position: absolute;
        }
        .clock .center-nut2 {
            height: 9px;
            width: 9px;
            background: #3498db;
            border-radius: 50%;
            z-index: 15;
            position: absolute;
        }
        .indicators div {
            position: absolute;
            width: 2px;
            height: 5px;
            background: #404040;
        }
        .indicators div:nth-child(1) {
            transform:rotate(30deg) translateY(-100px);
        }
        .indicators div:nth-child(2) {
            transform:rotate(60deg) translateY(-100px);
        }
        .indicators div:nth-child(3) {
            transform:rotate(90deg) translateY(-100px);
            background: #3498db;
        }
        .indicators div:nth-child(4) {
            transform:rotate(120deg) translateY(-100px);
        }
        .indicators div:nth-child(5) {
            transform:rotate(150deg) translateY(-100px);
        }
        .indicators div:nth-child(6) {
            transform:rotate(180deg) translateY(-100px);
            background: #3498db;
        }
        .indicators div:nth-child(7) {
            transform:rotate(210deg) translateY(-100px);
        }
        .indicators div:nth-child(8) {
            transform:rotate(240deg) translateY(-100px);
        }
        .indicators div:nth-child(9) {
            transform:rotate(270deg) translateY(-100px);
            background: #3498db;
        }
        .indicators div:nth-child(10) {
            transform:rotate(300deg) translateY(-100px);
        }
        .indicators div:nth-child(11) {
            transform:rotate(330deg) translateY(-100px);
        }
        .indicators div:nth-child(12) {
            transform:rotate(360deg) translateY(-100px);
            background: #3498db;
        }
        .sec-hand, .min-hand, .hr-hand{
            position: absolute;
        }
        .sec-hand, .sec {
            height: 180px;
            width: 180px;
            z-index: 6;
            /* background: rgb(241, 16, 16); */
        }
        .min-hand, .min {
            height: 140px;
            width: 140px;
            z-index: 5;
        }
        .hr-hand, .hr {
            height: 110px;
            width: 110px;
            z-index: 4;
        }
        .sec, .min, .hr {
            display: flex;
            /* align-items: center; */
            position: absolute;
            justify-content: center;
        }
        .sec:before {
            position: absolute;
            content: '';
            height: 110px;
            width: 3px;
            background: #3498db;
        }
        .sec:after {
            position: absolute;
            content: '';
            height: 35px;
            width: 7px;
            background: #3498db;
            top: 105px;
            border-radius: 5px;
        }
        .min:before {
            position: absolute;
            content: '';
            top: -15px;
            width: 1px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 60px solid #e95945;
        }
        .min:after {
            position: absolute;
            content: '';
            top: 40px;
            width: 3px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 30px solid #e95945;
        }
        .hr:before {
            position: absolute;
            content: '';
            /* top: -15px; */
            width: 1px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 35px solid #303030;
        }
        .hr:after {
            position: absolute;
            content: '';
            top: 35px;
            width: 3px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 35px solid #303030;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="center-nut"></div>
        <div class="center-nut2"></div>
        <div class="indicators">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="sec-hand">
            <div class="sec"></div>
        </div>
        <div class="min-hand">
            <div class="min"></div>
        </div>
        <div class="hr-hand">
            <div class="hr"></div>
        </div>
    </div>

    <script>
        const sec = document.querySelector(".sec");
        const min = document.querySelector(".min");
        const hr = document.querySelector(".hr");

        setInterval(() => {
            let time = new Date();
            let secs = time.getSeconds() * 6;
            let mins = time.getMinutes() * 6;
            let hrs = time.getHours() * 30;
            sec.style.transform = `rotateZ(${secs}deg)`;
            min.style.transform = `rotateZ(${mins}deg)`;
            hr.style.transform = `rotateZ(${hrs + (mins/12)}deg)`;
        }, 1000); //默认一秒
    </script>
</body>
</html>
素材来自于油管。手打不易，且看且学会。
awk_bioinfo
关注
专栏目录
HTML动画效果
weixin_50509134的博客
06-04 2659
我们在浏览一些网页时，页面上不止有图片和文字，还有着许多动画。那动画是怎么编写的呢？接下来我们就简单的对它进行一些初步的了解。 首先我们来看一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
HTML实现简单的动画效果(盒子过渡，扑克旋转)
热门推荐
冷色调的夏天的博客
08-22 2万+
HTML实现简单的动画效果(盒子过渡，扑克旋转) // 实现一个简单的鼠标点击div触发过渡效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style> *{ margin:0px; padding:0px;}...
扑克牌旋转
shi_jia233的博客
10-27 887
1打开DW，CTRL+n新建一个html 2在html和body里加上div，div里加上扑克牌图片 3然后title下加上style给div里的图片设置属性绝对定位和左偏移上偏移和图片的高 再加上旋转角 上右 旋转时间 4给鼠标移入后的每张扑克牌设置角度 角度可以不是固定的但是一样的角度看不出太好的效果上面的旋转时间鼠标移出后也是收回时间。 5鼠标未移入 移入后的效果 ...
[SoOnPerson] HTML5 简单的动画
SoOnPerson的博客
04-28 389
有了第一个粉丝呀！开心！在学习动画的时候，有了一点小成果，开心，记录一下不过不知道怎么能发动图，就不发结果了文件 html5.html&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动画&lt;/title&
html扑克自动翻转,旋转扑克牌.html
weixin_39890633的博客
05-31 851
Document.pk>div {width: 310px;height: 438px;background-image: url(./media/pk1.png);border: 1px solid #000;position: absolute;left: 40%;top: 30%;transition: all 1s;/* 设置旋转的中心点 默认是正中心 中心 *//* trans...
易语言源码图形时钟.rar
02-16
"易语言源码图形时钟.rar" 是一个包含易语言编写的图形时钟程序的源代码压缩包。这个项目可能是一个简单的桌面应用程序，用于显示当前时间，并可能具有一定的自定义功能，比如调整时钟的外观或显示模式。 源代码是...
AT89C51设计LCD1602显示DS1302实时日历时钟毕业论文文档+软件源码.rar
05-09
AT89C51设计LCD1602显示DS1302实时日历时钟毕业论文文档+软件源码,单片机LCD毕业设计，有代码、仿真电路、设计报告,仿真使用的是proteus仿真，可直接加载HEX文件运行. 摘要 此次课程设计的要求是通过LCD与单片机的...
易语言数字圆形排列源码.7z
05-15
这种排列方式通常在图形用户界面或某些算法展示中有所应用，比如制作数字时钟或者进行特定的数学演示。 源代码是程序设计的核心部分，它是由程序员按照某种编程语言的规则书写的指令集合，用来告诉计算机执行特定...
探索Android自定义时钟的源码实现
通常，源码是使用编程语言书写的，例如Java或Kotlin，这些是Android平台常用的开发语言。 根据提供的文件名称列表，我们可以推测这个压缩包中可能包含的文件和知识点如下： - **布局文件（XML）**: 描述自定义时钟...
基于STM32F407单片机（寄存器版）实验例程源码之-D手写识别实验.rar
最新发布
11-07
- 源码使用寄存器版编程意味着直接操作微控制器的硬件寄存器，如RCC（Reset and Clock Control）寄存器用于配置时钟，GPIO（General Purpose Input/Output）寄存器控制IO口。 2. **STM32CubeMX配置**： - 在进行...
html5超炫魔术扑克牌动画特效
06-12
html5超炫魔术扑克牌动画特效是一款效果非常棒的魔术扑克牌变换特效。
html5 动画过渡效果,HTML5动画过度与动画效果
weixin_42298412的博客
06-07 1475
HTML5动画过度与动画效果标签：Web前端1、动画过渡属性 transition1、transition的功能定义transition的功能，使css的属性值在一定的时间内平滑地过渡。 这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。2、transition可定义的属性transition-property:设置哪些属性进行过渡 transit...
HTML5红心K扑克牌翻转js特效
ICode联盟
12-14 343
HTML5红心K扑克牌翻转特效是一款红色背景搭配扑克牌，点击扑克牌产生翻转特效。
手写时钟
milugloomy的博客
09-20 201
代码 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Clock</title> </head> <style> .container { width: 500px; height: 500px; border-radius: 50%; background: #000; border: 30p
运用css设计简单3D魔方
LiHang1234567777的博客
07-22 295
本文介绍了css简单魔方样式的基础内容。一、对于3D的理解图二、使用步骤*{margin0;padding0;}html{width100%;height100%;}body{width100%;height100%;displayflex;center;center;}section{width150px;height150px;positionrelative;animation}
html制作图片动画效果代码,HTML5 Canvas：制作动画特效
weixin_32864391的博客
06-03 2729
编辑推荐:本文来自于jquery之家,html5制作canvas动画的基本步骤，控制canvas动画和实例代码。要在 HTML5 canvas 中绘制图像动画效果，你需要绘制出每一帧的图像，然后在一个极短的时间内从一帧过渡到下一帧，形成动画效果。这其实是一种视觉欺骗，原理就像播放电影一样，胶片上每一格是一帧图片，然后快速的播放它们，在人的眼睛看来就是一个完整的动画效果。制作canvas动画的基本步...
html过渡状态,css3旋转过渡
weixin_39828198的博客
06-03 190
css3动画如何在动作结束时保持该状态不变animation-fill-mode : none | forwards | backwards | both; none：不改变默认行为。 forwards ：当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)。 backwards：在 animation-delay 所指定的一段时间内，在动画显示之前。css3 实现动画效果，怎样使他无限循环...
扑克牌的轴心旋转
ln201009的博客
11-17 527
1、首先，我们先进入DW里面新建一个html文档，改一下title为扑克牌的轴心旋转，在body里面写一个div命名为pkbox用于放置扑克图片，然后在里面放置img标签，引入两张红黑的扑克再复制成为六个。 2、新建一个css文档命名为pk 然后返回html文档使用link标签引入css样式表。 3、现在css样式表里面写上通配符，设置margin，padding值为0；现在的基本效果就是图二。（以下所有的图二都是我缩小了页面的效果） 4、给类名为pkbox这个盒子设置
HTML5+原生javascript 卡片扑克旋转展开效果demo
CodingNoob
03-11 1907
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5+原生javascript 卡片扑克旋转展开效果demo</title> <style> *{margin:0;padding:0;} body{background:#ccc;padding-t
PyTorch实现的高分Minist手写数字识别源码
资源摘要信息:"本项目是基于PyTorch框架实现的一个手写数字识别系统，适用于需要进行期末大作业或课程设计的计算机专业学生和学习者。该系统针对MNIST数据集设计，旨在提供一个完整且高质量的实战练习案例。以下是该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值