(完整源码)科技感数字时钟+html

最新推荐文章于 2024-06-05 21:25:17 发布
最新推荐文章于 2024-06-05 21:25:17 发布
阅读量3.2k 收藏 21
点赞数 8
分类专栏： Java/html编程练习集 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhazhazhaming/article/details/107838676
版权 
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<meta name="apple-mobile-web-app-title" content="CodePen">

  <title>CodePen - 3d Number Count</title>
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}
h1{
  color: #0BFDFD;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
}
.g-number-group{
  position: relative;
}
.g-number-group:last-of-type::after,.g-number-group:last-of-type::before{
  display: none;
}
.g-number-group::before,.g-number-group::after{
  content: '';
  display: block;
  position: absolute;
  transform: translateZ(50px);
  right: 1vw;
  width: 0.5vw;
  height: 0.5vw;
  background: #0BFDFD;
  animation: point 2s linear infinite;
}
.g-number-group::before{
  bottom: 6vw;
}
.g-number-group::after{
  top: 2vw;
}

@keyframes point{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.g-number-group{
  display: inline-block;
}

.g-number-container {
  position: relative;
  margin-top: 10vh;
  text-align: center;
  z-index: 999;
}

.g-number-rotate {
  -webkit-transform: rotateX(20deg) rotateZ(0);
          transform: rotateX(20deg) rotateZ(0);
}

.preserve {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.g-number {
  position: relative;
  width: 3vw;
  height: 12vw;
  display: inline-block;
  margin: 3vw 3vw 0 0;
}
.g-number .g-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 3vw;
  height: 2px;
  background: #181919;
  /* background: #f00; */
}

.g-number .g-line:nth-child(1) {
  transform: translateY(-0.2vw);
}
.g-number .g-line:nth-child(2) {
  top: 3.2vw;
}

.g-number .g-line:nth-child(3) {
  transform: rotate(180deg) translateY(-0.2vw);
  top: 6.4vw;
}
.g-number .g-line:nth-child(4){
  transform: rotate(90deg) translateY(0.2vw);
  transform-origin: 0 center;
}
.g-number .g-line:nth-child(5) {
  transform: rotate(-90deg) translateY(0.2vw);
  transform-origin: 100% center;
}
.g-number .g-line:nth-child(6) {
  top: 3.4vw;
  transform: rotate(90deg) translateY(0.2vw);
  transform-origin: 0 center;
}
.g-number .g-line:nth-child(7) {
  top: 3.4vw;
  transform: rotate(-90deg) translateY(0.2vw);
  transform-origin: 100% center;
}
.g-number .g-line::before,
.g-number .g-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #34eabc;
  box-shadow: 0 0 1vw #111414, inset 0 0 0.125vmin #0BFDFD;
}
.g-number .g-line::before {
  left: 0;
  right: 50%;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}
.g-number .g-line::after {
  left: 50%;
  right: 0;
  transition: all .5s ease-out;
}

.g-number .translate::before, .g-number .translate::after {
    transform: translateZ(50px);
}

.g-comma {
  position: relative;
  top: -5.4vw;
  display: inline-block;
  width: 1vw;
  height: 1vw;
  background: #181919;
  margin: 3vw 3vw 0 -0.8vw;
}
.g-comma::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #34eabc;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
}
.g-comma::after {
  content: "";
  position: absolute;
  bottom: -.8vw;
  right: .3vw;
  border: .2vw solid transparent;
  border-top: 0.9vw solid #34eabc;
  -webkit-transform: translateZ(50px) rotate(40deg);
          transform: translateZ(50px) rotate(40deg);
}

.g-number[data-digit="1"] .g-line:nth-child(1)::before, 
.g-number[data-digit="1"] .g-line:nth-child(1)::after,
.g-number[data-digit="1"] .g-line:nth-child(2)::before,
.g-number[data-digit="1"] .g-line:nth-child(2)::after,
.g-number[data-digit="1"] .g-line:nth-child(3)::before,
.g-number[data-digit="1"] .g-line:nth-child(3)::after,
.g-number[data-digit="1"] .g-line:nth-child(4)::before,
.g-number[data-digit="1"] .g-line:nth-child(4)::after,
.g-number[data-digit="1"] .g-line:nth-child(6)::before,
.g-number[data-digit="1"] .g-line:nth-child(6)::after,

.g-number[data-digit="2"] .g-line:nth-child(4)::before,
.g-number[data-digit="2"] .g-line:nth-child(4)::after,
.g-number[data-digit="2"] .g-line:nth-child(7)::before,
.g-number[data-digit="2"] .g-line:nth-child(7)::after,

.g-number[data-digit="3"] .g-line:nth-child(4)::before,
.g-number[data-digit="3"] .g-line:nth-child(4)::after,
.g-number[data-digit="3"] .g-line:nth-child(6)::before,
.g-number[data-digit="3"] .g-line:nth-child(6)::after,

.g-number[data-digit="4"] .g-line:nth-child(1)::before,
.g-number[data-digit="4"] .g-line:nth-child(1)::after,
.g-number[data-digit="4"] .g-line:nth-child(3)::before,
.g-number[data-digit="4"] .g-line:nth-child(3)::after,
.g-number[data-digit="4"] .g-line:nth-child(6)::before,
.g-number[data-digit="4"] .g-line:nth-child(6)::after,

.g-number[data-digit="5"] .g-line:nth-child(5)::before,
.g-number[data-digit="5"] .g-line:nth-child(5)::after,
.g-number[data-digit="5"] .g-line:nth-child(6)::before,
.g-number[data-digit="5"] .g-line:nth-child(6)::after,

.g-number[data-digit="6"] .g-line:nth-child(5)::before,
.g-number[data-digit="6"] .g-line:nth-child(5)::after,

.g-number[data-digit="7"] .g-line:nth-child(2)::before,
.g-number[data-digit="7"] .g-line:nth-child(2)::after,
.g-number[data-digit="7"] .g-line:nth-child(3)::before,
.g-number[data-digit="7"] .g-line:nth-child(3)::after,
.g-number[data-digit="7"] .g-line:nth-child(4)::before,
.g-number[data-digit="7"] .g-line:nth-child(4)::after,
.g-number[data-digit="7"] .g-line:nth-child(6)::before,
.g-number[data-digit="7"] .g-line:nth-child(6)::after,

.g-number[data-digit="9"] .g-line:nth-child(6)::before,
.g-number[data-digit="9"] .g-line:nth-child(6)::after,
.g-number[data-digit="0"] .g-line:nth-child(2)::before,
.g-number[data-digit="0"] .g-line:nth-child(2)::after {
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  background: #3c4444;
  box-shadow: 0 0 1vw #425454;
}

</style>

</head>

<body translate="no" >
  <h1>
    科技感: 数字时钟
  </h1>
  <div class="g-number-container preserve">
    <div class="g-number-rotate preserve">
      <div class="g-number-group" >
          <div class="g-number preserve" data-digit="1">
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
          </div>
          <div class="g-number preserve" data-digit="3">
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
          </div>
      </div>
      <div class="g-number-group">
        
        <div class="g-number preserve" data-digit="5">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
        <div class="g-number preserve" data-digit="8">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
      </div>
      <div class="g-number-group" >
        <div class="g-number preserve" data-digit="0">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
        <div class="g-number preserve" data-digit="5">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
      </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var formatNumber = function(num) {
    return (num < 10 ? '0' + num : num) + ''
  }
  $(function() {
    var emls = $('.g-number')
    var draw = function() {
      var time = new Date()

      time = formatNumber(time.getHours()) + formatNumber(time.getMinutes()) + formatNumber(time.getSeconds())
      for (var i = 0; i < emls.length; i++) {
        $(emls[i]).attr('data-digit', time[i])
      }
    }
    setInterval(() => {
      draw()
    }, 1000);
    $('h1').click(function() {
     
    })
  })
</script>
</body>

</html>
莼白菜
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
HTML5+CSS3+JS小实例：科技感满满的数字科技脸特效
艾恩小灰灰的博客
02-06 175
实例：科技感满满的数字科技脸特效。技术栈：HTML+CSS+JS。
HTML网页设计 科幻风格登录界面
weixin_74774974的博客
12-27 1256
HTML网页设计科幻风格登录界面 比赛时写的 附HTML CSS 背景avif上传到资源里了
数电实验中设计数字钟所用到的代码详细版（Verilog语言来实现）
最新发布
m0_74949249的博客
06-05 745
本文主要展示了实现数字钟的几步重要代码，有需要者自取
用HTML5 Canvas绘制时钟
weixin_63929524的博客
06-28 771
HTML5的Canvas元素提供了一种在网页上绘制图形的强大方式。结合JavaScript，我们可以使用Canvas绘制出各种图形，包括时钟。本文将介绍如何使用Canvas和JavaScript来实现一个时钟，以及每个步骤的思路和实现方法。通过使用HTML5 Canvas和JavaScript，我们可以轻松地实现一个简单的时钟。本文介绍了绘制时钟所需的HTML结构和JavaScript代码，并详细解释了每个步骤的实现思路。你可以在此基础上进一步扩展和美化时钟的样式，实现更多功能，如。
3D科技感数字实时时钟/倒计时：web前端Demo小组件特效样式插件源码(html/JS/CSS)
Yian_Tp的博客
07-13 996
1.Digital Clock #3December 效果图： 内嵌到桌面： 2.3D科技感数字时钟（不会跟随鼠标） 3.3D科技感数字时钟（像素版） 源码下载连接： https://wwi.lanzoui.com/iTGpNs8upkb
HTML & CSS & JavaScript - 一个简单数字时钟
qq_29761395的博客
07-15 2942
代码】HTML&CSS&JavaScript-一个简单数字时钟。
html绘制数字时钟,用HTML5制作数字时钟的教程
weixin_42116794的博客
06-19 1046
就是这个数字时钟，当时觉得这个创意不错，但是也没去折腾。直到昨天同事又在网上看到这个案例，他觉得很酷炫，就跑过来问我，这个是怎么实现的，然后我大概想了一下实现方法后也来了点兴趣，就花了一点时间模仿做出来了一个。不同的是，岑安用的是div来做的。而我就是用canvas来实现的。用canvas来做性能方面会更好，因为就单单操控每个点的运动，用js控制dom的style属性跟用js控制canvas绘图相...
HTML+JS实现时钟
IT学长
04-01 7924
HTML+JS实现时钟 效果： 知识点： Canvas 对象及其属性。 setTimeout() 方法，用于在指定的毫秒数后调用函数或计算表达式。 Date()对象 时分秒对应弧度制的计算： var pi=Math.PI var dat=new Date() var hours=dat.getHours() //获取小时 var minuntes=dat...
HTML5 canvas实现科技感十足的带辐射线动画时钟特效源码.zip
11-03
这个“HTML5 canvas实现科技感十足的带辐射线动画时钟特效源码.zip”文件，正是利用了canvas元素的特性，为用户呈现了一个具有科技感的动态时钟效果，其特点在于加入了辐射线动画，使得时钟更具视觉冲击力。...
二进制炫酷时钟计时器HTML源码
12-10
【二进制炫酷时钟计时器HTML源码】是一种独特的网页计时器实现，它将时间以二进制的形式展示，为网页设计增添了科技感和创新元素。这种计时器利用HTML、CSS3以及可能涉及的JavaScript技术来创建，下面我们将详细探讨...
JS实现的LED数字时钟特效源码.zip
11-19
在JavaScript（JS）中创建LED数字时钟特效是一种常见的网页动态效果展示，它可以为网站增添科技感和互动性。此项目包含的源码是用JS编写的，用于模拟LED数字显示时钟的效果，使得时间以醒目的LED数字形式呈现。下面...
科技感个人简历html网页模板下载.rar
07-11
科技感个人简历html网页模板下载 充满科技感的蓝色风格的个人简历个人介绍页面模板 个人主页发展历程页面html模板，要知道一个好的企业单位 的眼光已知都是很高的，那么我们要怎么吸引他们让他们知道 了解你这个人，那么我们就要给这个企业单位投简历 所以，一份好的简历要怎么弄呢，我们这款个人简历模板就能实现 我们的模板保证您拥有一份炫酷科技感十足的个人简历，拥有这样 一份科技感爆表的简历，绝对能帮助你吸引企业单位的目光和欣赏
科技感十足的个人简历html网页模板.zip
08-19
蓝色科技感的个人简历介绍页面模板，个人主页发展历程页面html模板下载。
科技感登陆界面
08-08
蓝色风格、画面非常酷炫、界面科技感十足的网站登录界面。
圆盘时钟动画源码
05-06
圆盘时钟动画源码,很有美感，希望对在学前端的你能有所帮助
CSS3+HTML5实现漂亮LED数字时钟
06-14
CSS3+HTML5实现漂亮LED数字时钟
精品源码 / 炫酷特效 / 表盘时钟
12-16
本资源包中的"精品源码"提供了一款独特的前端特效，它将传统的时钟元素与现代的网页技术相结合，打造出一款极具科技感的"仿真壁挂时钟"。 首先，我们来探讨这款时钟特效的核心概念。时钟是生活中常见的计时工具，将...
抖音炫酷时钟前端源码.zip
07-02
【抖音炫酷时钟前端源码.zip】是一个包含有炫酷特效的时钟应用，它以抖音风格设计，能够实时显示当前时间，并且具有动态轮盘式的转动效果，为用户的电脑桌面增添了一份科技感和趣味性。这个项目是前端开发的成果，...
樱花飞舞
diejian7742的博客
02-28 7421
<!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花漫天飞舞</title> </head> <style> body { padding:0; margin:0; overflow:hidden; ...
mir2源码完整版(服务端+客户端)
05-09
Mir2是一款经典的MMORPG游戏，其源码完整版包含了服务端和客户端两部分。服务端是游戏的核心部分，主要负责处理游戏逻辑、数据处理和通信等功能。客户端则是游戏的界面部分，负责显示游戏画面和处理用户输入等功能。 Mir2源码完整版的发布，为游戏开发者和爱好者提供了一个深入探索Mir2游戏的机会。通过研究源码，开发者可以了解游戏的内部实现和运行机制，从而开发出更好的游戏或者开发出具备类似功能的游戏。对于爱好者而言，可以深入了解游戏的结构和设计，更好地玩游戏或者了解游戏产生的历史背景。 服务端的源码包含了游戏的核心逻辑，包括地图、怪物、任务、技能等方面的设计和实现。用户可以阅读源代码来了解这些方面的详细内容。在熟悉了游戏的底层实现之后，用户可以修改源代码来实现新的功能或者修复已知的Bug。 客户端的源码包含了游戏的UI界面和交互，包括角色创建、背包系统、装备系统等。用户可以从中了解到游戏的UI设计思路以及实现方式。在熟悉了游戏的UI实现之后，用户可以修改源代码来自定义游戏的UI界面和交互方式。 综上，Mir2源码完整版的发布对于游戏开发者和爱好者来说都是一个很好的新闻。它提供了一个深入了解Mir2游戏的机会，并且可以通过源代码的修改来实现新的功能或者自定义游戏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值