html js 做一个钟表,html,css,js实现的一个钟表

Clock

}p{color:#854d27;

}code{color:#f4c950;

}.clock{--clock-width:50vmin;width:var(--clock-width);height:var(--clock-width);position:relative;overflow:hidden;border:6px solid #f4c950;border-radius:50%;

}.clock:after{content:‘‘;position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%, -50%);width:6px;height:6px;background:#d0b8ac;border-radius:50%;

}.scaleContainer{--scale-width:2px;margin:0;padding:0;width:var(--scale-width);height:calc(var(--clock-width) / 2 + 4px);position:absolute;bottom:calc(var(--clock-width) / 2);left:calc((var(--clock-width) - var(--scale-width)) / 2);

/*background: #f4c950;*/transform-origin:center bottom;

}.scaleContainer:nth-of-type(5n + 5){--scale-width:5px;width:var(--scale-width);left:calc((var(--clock-width) - var(--scale-width)) / 2);

}.scale{height:calc(var(--clock-width) / 22);background:#f4c950;

}.scaleContainer:nth-of-type(5n + 5) .scale{height:calc(var(--clock-width) / 16);

}.hand{--hand-width:4px;--hand-length:calc(var(--clock-width) / 2 - 6px);width:var(--hand-width);height:var(--hand-length);background:#d0b8ac;position:absolute;bottom:calc(var(--clock-width) / 2);left:calc((var(--clock-width) - var(--hand-width)) / 2);transform-origin:center bottom;z-index:20;

}.hour-hand{height:15vmin;

}.minute-hand{--hand-height:20vmin;height:var(--hand-height);

}.second-hand{--hand-width:2px;width:var(--hand-width);left:calc((var(--clock-width) - var(--hand-width)) / 2);

}

html js 做一个钟表,html,css,js实现的一个钟表相关推荐

html js 做的小游戏,用js做一个小游戏平台 (一)
记得上班写代码时,我们技术总监总说是要先"设计",那就先"设计"吧. ps:我是新手大家多多见谅. .网页游戏区域.就是说需要知道游戏在网页上的区域,如下: 在 ...
JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈一.效果图二.介绍图标库使用Element-UI <!-- 引 ...
JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录一.效果图二.介绍三.代码 (1)HTML (2)CSS (3)JavaScript J ...
用HTML语言编写一个个人主页,Html+CSS +Javascript实现的一个很炫个人主页网页
[实例简介] Html+CSS +Javascript实现的人主页网页,纯属个人原创.支持Firefox.IE等各种浏览器.值得作业提交,其他的也可作为参考! [实例截图] [核心代码] HtmlCS ...
js css3实现tab,div+css+js实现tab页
实现tab页并水平居中 ruby { font-size:60px; color:red; font-family:微软雅黑; } .tab { border:solid 1px; border-co ...
html js相册样式,使用html+css+js实现3D相册
Title html, body { margin: 0; padding: 0; background-color: #29454d; /*禁止文字被选中*/ -moz-user-select: n ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
有趣的HTML实例（十四）窗边风景动画（css+js）
不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 index.html style.css ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...

html js 做一个钟表,html,css,js实现的一个钟表

html js 做一个钟表,html,css,js实现的一个钟表相关推荐

最新文章

热门文章