动态时间交互

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量145 收藏
点赞数
分类专栏： 小案例 文章标签： javascript jquery css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48791929/article/details/106857112
版权

样式
在这里插入图片描述

css 部分

body{background: #000;}
*{margin: 0;padding: 0;}
i{
width: 5px;
height: 50px;
background: #fff;
opacity: 0;
display: block;
border-radius: 2px;
position: absolute;
transition: 1s;
box-shadow: 1px 0px 9px #0dc0e8, 1px 0px 12px #c5f7c2;
}
i.w{width: 57px;height: 5px;}
i:nth-child(2n){transition-delay:0.6s;transition: 0.4s;}
.div{perspective: 4000px;
position: absolute;
width: 100%;
height: 100%;}
.time{display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content:space-between;
  align-items: center;transition: 0.5s;
  width: 1000px;margin: 0 auto;position: fixed;top: 50%;left: 0;margin-top: -119px;right: 0;}
.time .demo{transition: 1.5s;}
.time .demo:hover{transform: scale(1.2);}

.spot span{width: 10px;height: 10px;background: #fff;display: block;margin: 30px 0;animation: myfirst 1s ease-out 0s infinite alternate;box-shadow: 1px 0px 9px #0dc0e8,1px 0px 12px #09D2E8;}
@keyframes myfirst
{
0 {opacity: 1;}
100% {opacity: 0.6;}
}

.demo{position: relative;width: 115px;height: 238px;}
.demo i:nth-child(1){top: 11px;left: 0;}
.demo i:nth-child(3){top: 11px;right: 0;}
.demo i:nth-child(2){top: 62px;left: 0;}
.demo i:nth-child(4){top: 62px;right: 0;}
.demo i:nth-child(5){top: 124px;left: 0;}
.demo i:nth-child(7){top: 124px;right: 0;}
.demo i:nth-child(6){top: 176px;left: 0;}
.demo i:nth-child(8){top: 176px;right: 0;}
.demo i:nth-child(9){top: 0px;left: 0px;}
.demo i:nth-child(10){top: 0px;right: 0px;}
.demo i:nth-child(11){top: 115px;left: 0px;}
.demo i:nth-child(12){top: 115px;right: 0px;}
.demo i:nth-child(13){bottom: 0;left: 0px;}
.demo i:nth-child(14){bottom: 0;right: 0px;}

js部分

arr = {
				"arr0" : [1,3,2,4,5,6,7,8,9,10,13,14],
				"arr1" : [3,4,7,8],
				'arr2' : [3,4,9,10,11,12,13,14,5,6] ,
				"arr3" : [9,10,3,4,11,12,7,8,13,14],
				"arr4" : [1,2,11,12,3,4,7,8],
				"arr5" : [9,10,1,2,11,12,7,8,13,14],
				"arr6" : [9,10,1,2,11,12,5,6,7,8,13,14],
				"arr7" : [1,2,3,4,7,8,9,10],
				"arr8" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14],
				"arr9" : [1,2,3,4,9,10,11,12,13,14,7,8],
			}
			
			


			 
			 function ss(){
				 var now = new Date();
				 var hour = now.getHours();//得到小时
				 var minu = now.getMinutes();//得到分钟
				 var sec = now.getSeconds();//得到秒
				 var s = sec%10
				 var s10 =parseInt(sec/10) 
				 var s_ar = "arr"+s
				 var s_ar10 = "arr"+s10
				 
				 var m = minu%10
				 var m10 =parseInt(minu/10) 
				 var m_ar = "arr"+m
				 var m_ar10 = "arr"+m10
				 
				 var h = hour%10
				 var h10 =parseInt(hour/10) 
				 var h_ar = "arr"+h
				 var h_ar10 = "arr"+h10
				 // console.log(sec,ar)
				 
				$(".demo").eq(5).attr("class","demo"+" "+("demo"+s))
				$(".demo").eq(4).attr("class","demo"+" "+("demo"+s10))
				
				$(".demo").eq(3).attr("class","demo"+" "+("demo"+s))
				$(".demo").eq(2).attr("class","demo"+" "+("demo"+s10))
				
				$(".demo").eq(1).attr("class","demo"+" "+("demo"+h))
				$(".demo").eq(0).attr("class","demo"+" "+("demo"+h10))
				
				$(".demo i").css({"opacity":"0","transform":"scale(0.7) translateX(30px)"})
				 
				
		
				// 秒
				for( let s = 0 ; s < arr[s_ar].length ; s++){
					$(".demo").eq(5).find("i").eq((arr[s_ar][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}
				
				for( let s = 0 ; s < arr[s_ar10].length ; s++){
					$(".demo").eq(4).find("i").eq((arr[s_ar10][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}
				
				// 分
				for( let s = 0 ; s < arr[m_ar].length ; s++){
					$(".demo").eq(3).find("i").eq((arr[m_ar][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}
				
				for( let s = 0 ; s < arr[m_ar10].length ; s++){
					$(".demo").eq(2).find("i").eq((arr[m_ar10][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}
				
				// 时
				for( let s = 0 ; s < arr[h_ar].length ; s++){
					$(".demo").eq(1).find("i").eq((arr[h_ar][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}
				
				for( let s = 0 ; s < arr[h_ar10].length ; s++){
					$(".demo").eq(0).find("i").eq((arr[h_ar10][s]-1)).css({"opacity":"1","transform":"scale(1)"})
					console.log()
				}

		
				 
				 
				  setTimeout(ss,1000);
			 }
			
			ss()
		
			
			$(document).mousemove(function(){
				var y = event.screenY
				var x = event.screenX
				var h = screen.availHeight
				var w = $("body").width()
		
				var num1 = -(y - h/2)/(h/2)*100
				if(num1 > 30){
					num1 = 30
				}
				 if(num1 < -30){
					num1 = -30
				}
				// 控制最大倾斜角度

				var num2 = (x - w/2)/(w/2)*100
				if(num2 > 8){
					num2 = 8
				}
				 if(num2 < -8){
					num2 = -8
				}
				
				$(".time").css("transform","rotateX("+ num1 +"deg)" +""+"rotateY("+ num2 + "deg)")
			
				
				
			}).mouseout(function(){
				$(".time").css("transform","rotateX("+0+"deg)"+" "+"rotateY("+0+"deg)")
			})

引入jq文件

以下是html部分

<div class="div">
			<div class="time">
				<!-- 时 -->
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
				
				<div class="spot">
					<span></span>
					<span></span>
				</div>
				<!-- 分 -->
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
				
				<div class="spot">
					<span></span>
					<span></span>
				</div>
				<!-- 秒 -->
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
				<div class="demo">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
					<i class="w"></i>
				</div>
			</div>
		</div>

原理：通过每一秒调用刷新获取当前时间 匹配 json 展示时间样式

倾斜结合鼠标滑动改变 rotate 值

想要看到倾斜效果 用到 css3 perspective 属性调整视角

weixin_48791929
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一种在ssm框架下时间交互的简单解决方案
开发备忘
05-18 3226
总结了基于ssm框架下的快速处理时间的方案
基于processing的交互动态绘画系统
sinat_41802987的博客
12-30 9794
关于绘画 我认为绘画就是将自己的意识与思想通过一些手段呈现在载体上的作品，这种呈现方式可以是多种多样的，不论是用画笔涂鸦，颜料泼洒，或者是通过手势肢体控制，只要倾注了自己的感情自己的想法，那么就是一张绘画作品，如果能给自己带来愉悦，那就是一张完美的绘画作品，如果这张作品不仅能给自己带来愉悦还能给别人带来愉悦或者说是带来联想，那就是一张非常优秀的绘画作品了。 这次的绘画系统结合了一些交互动态的效果，...
时间感知对交互设计的影响
02-02
在交互设计中如何加以利用时间？它是可控的吗？元素的时间控制难以描述，但我们都能感觉得到，从令人厌烦的等待加载，到令人愉快的轻松穿梭于页面间。时间控制的范围很广，大到可感受到的时间增量，小到区区毫秒。单独看似乎没有意义，但无论如何，它积累起来就能影响用户的看法。本文中我们讨论的内容涵盖一切随时间变化的元素：视频、音频、动画等等。我们会从时间为何重要讲起，然后讨论时间控制的要素，还有如何改善它们，之后我们会探索快速和简洁如何发挥作用。时间是个难以掌控的概念，因为它的范围如此广阔。就像一个电子的大小，相对于我们银河系几乎无法察觉。一毫秒的跨度也一样，相比一个千年，根本感受不到。但是数字世界的时间与人
前后端时间数据交互
zkz1041158481的博客
11-10 1287
前后端时间数据交互 前端能获取后端时间，跟后端能接收前端时间的要点是前后端的时间格式要一致 在后端使用@JsonFormat注解 使用方式很简单，在实体类字段加上该注解 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") private Date createdTime; 如果你的是springboot项目，你想更加方便点，你也可以在yml文件上配置 spring: jackson: time-zone: GMT+8
前后端分离--时间交互（后端是Date类型）
卡哇伊的码农
02-20 3841
如果你简单的进行时间的一个交互，发现返回到前端的时间格式个Date类型，不规范 简单的做法就是在相应的时间实体属性上加上 @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss") 当然，其实还有很多其它的办法，我这里只是一种最偷懒的.......
【Axure】交互&情形
2301_79278613的博客
12-17 1403
通俗来讲就是，谁用了什么方法做了什么事情，主体"谁"对应的就是axure中的元件，"什么方法"对应的就是交互事件，比如单击事件、双击事件，"什么事情"对应的就是交互动作，比如打开连接、设置面板状态等。当然除了这三个基本的元素外，还可以设置交互样式。例如鼠标悬停、鼠标按下等。在浏览有些网站时，当你的鼠标移动到某个位置上，就会出现一些东西，鼠标移开了，就没有了。交互样式(仅对当前元件的样式进行更改)：选中元件，鼠标右键，选择【交互样式…】，选择交互触发类型，选择要更改的交互样式。
Qt+QtWebApp开发笔记（三）：http服务器动态html连接跳转基础交互
长沙创微智能科技官方博客
05-24 8058
网页很多时候是动态的，于是本篇文章目标实现一个简答的动态页面—页静态页面互相跳转，点击可以跳转到子页面。
动态交互app界面设计原理指南
maoqiu1234的博客
01-07 2751
运动app界面设计原理指南加粗样式 运动对数字产品的用户体验产生了深远的影响，但是，如果界面元素没有表现出基本的运动设计原理，则可用性会受到损害。在用户界面的上下文中，动作不仅仅是视觉装饰。它是一种强大的力量，可增强产品参与度并扩展设计交流的范围。 我们的世界是运动之一。即使在静止的瞬间，叶子也会发抖，肺部也会扩张。在数字产品设计领域中，运动似乎是第二自然，这是日常工作的扩展，可以毫不费力地加以利用。如果那是真的。 只需问问第一次使用动画UI元素的人。数小时的努力产生了业余成绩。像卡在屏幕上滑动一样简单的
交互设计学习总结
2301_78154597的博客
06-11 1617
交互设计（Interaction Design）是设计领域的一个重要分支，它关注于创建和优化人与产品、服务或系统之间的互动体验。2. 交互性：Axure提供了丰富的交互功能，允许设计师创建复杂的交互效果，如动态面板、条件逻辑、变量等。Axure和Sketch是两款在交互设计和UI设计领域中非常流行的工具，它们各自有不同的特点和用途。在今后的学习中会更加深入的了解交互设计及使用的原型软件，提高自身的知识储备，以更好的挖掘新技术。Axure 更适合于创建复杂的交互式原型，适合需要详细交互逻辑和流程设计的项目。
人机交互学习
qq_46056318的博客
03-11 1714
人机交互课程学习
动态交互UIKIT组件网页模板
01-22
动态交互UIKIT组件网页模板是一种现代化的网页设计资源，它结合了动态效果和用户界面工具包（UIKIT）的优势，为网页设计师提供了丰富的组件库，用于构建高度互动且视觉吸引人的网页。UIKIT是一个轻量级、模块化的...
国家医保电子凭证动态库
07-08
国家医保电子凭证业务标准动态库交互规范、定点医药机构对接医保业务综合服务终端接口规范使用的动态库。 /*********************************************************************************/ ** 版本：V1.1.8 *...
可视化大数据交互动态模板网页前端模板_可视化大数据交互动态模板网页前端模板_
09-30
本资源提供的"可视化大数据交互动态模板网页前端模板"，就是一个专为展示大数据设计的交互式平台，虽然它不具备实际处理数据的能力，但作为一个模拟演示，可以帮助我们理解大数据可视化的基本原理和实现方式。...
003_模拟可视化大数据交互动态模板网页前端_
10-01
这个"003_模拟可视化大数据交互动态模板网页前端_"项目就是针对这一领域的一个实例，旨在提供一个模拟环境来展示大数据如何在网页上进行动态交互和可视化。 首先，我们要理解“模拟可视化”这一概念。模拟可视化是...
jQuery动态垂直时间轴特效代码
03-20
jQuery动态垂直时间轴特效代码是一种常见的网页交互设计元素，它以一种直观且吸引人的方式展示序列事件或项目的时间顺序...通过学习和掌握这些知识点，开发者可以创建出富有吸引力和交互性的动态时间轴，提升用户体验。
Axure动态显示实时时间
PMIIᶜᶜ的博客
06-16 4934
Axure制作动态的实时时间
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 669
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 515
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 241
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Spring Quartz动态配置任务触发时间
总结来说，动态配置Spring Quartz时间的关键在于正确地处理用户输入的时间规则，将其转化为Cron表达式，并通过Spring的Job和Trigger接口与Quartz Scheduler进行交互，以达到动态调整任务执行时间的目的。这样的灵活...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值