用css3制作2种效果的在线时钟_LESS改进版

2022-10-25 17:09:30 网站优化 ℃

　　前言

　　先贴上另一位开发者的原文地址，其实里面显示的是2种风格的时钟，一种为传统的挂钟，一种为数字时钟，我就分开来显示了。这里再另外改了个不同背景色的方形时钟，对于数字时钟也进行了改进。

　　在最后会放出源码，给喜欢研究的小伙伴一个参考。当然咯，最好还是自己能实践一下。

　　此教程版本是基于原文地址基础上进行小的修改而来，使用的是LESS的Mixin代码方式，使得后期调整大小及颜色会更加方便，只需要调整不同参数即可。

　　如果你对LESS以及mixin不太了解，建议先学习基础知识。less编译css的软件，推荐使用koala。

　　第一步，创建文件

　　结构如上图所示，CSS里创建style.less就可以了（编译引用会生成css文件），另外创建resource文件夹，里面可以再创建mixin_clock.less（不需要编译），文件起名可以根据自己的项目需求。clock.html中正常引用style.css文件就可以了。

　　把css目录拖到koala软件中，并且开启style.less右边的source map，这样在浏览器上，f12可以看到对应的代码位置，方便调整。

　　style.less里的引用代码，编译后就可以自动生成同名.css文件了：

　　//公共文件夹根目录@resource_path: '../resource';// 组件扩展@import '@{resource_path}/mixin_clock';等以后resource里组件多的话，也可以单独留一个引用的文件。接下来就可以正式开工了。

　　第二步，按原教程录入内容

　　原来的css样式的部分，全都放在mixin_clock.less文件中，因为是引用并且一直在编译的，所以都能正常显示。

　　这里要提几点顺便的调整

　　1、border-radius，如果是正圆的，则改为50%，而不是具体的数值。

　　2、background: linear-gradient(top, #f9f9f9, #666)，里面的top，改为180deg，因为在部分chrome中可能会报错，而具体的角度不会

　　3、有些p用了position: absolute，就顺便加上z-index值，具体数字，根据层叠的前后进行设置

　　4、将最后的数字时钟和挂钟拆分（如果你想和在一起的话，建议改为年月日可能更实用）

　　第三步，调整为LESS的结构写法

　　使用less有个好处就是不需要反复写父级名称，部分的修改基础结构如下：

　　// 表盘 .frame_face { ... &:before { ... ｝ &:before { ... ｝｝tips: 因为要集成到别的框架中，自己定义的名称，建议统一改用下划线，以作区分。

　　这里的&，相当于.frame_face:before{}

　　第四步，提取公共部分，改为变量，并改成Mixin形式调用

　　这一步比较重要，这也是LESS比写标准CSS最显著的优势，当然现在CSS也可以写变量，但是远没有LESS写的方便。

　　将里面一些需要以后调整的都提取出来作为变量，我也大致罗列下调整的地方：

　　1、比如钟的大小，如果调整的话，里面的大小也都需要跟着调整，所以上面提到最好是按百分比作为相对的数值，那么调整一个地方，相对的部分也能跟着进行调整。

　　2、涉及到的颜色，比如背景色，文字颜色等。当然咯这里涉及的地方比较多，并非所有的都需要提取出来，根据自己的需求即可。

　　3、倒角数值也可以取出来，比如最终需要一个方形的时钟，那就改成数值就可以了。

　　4、改为Mixin版，以方便参数调用，为了便于区分，可以前缀加上mixin，格式参考：

　　.mixin_basic_clock(变量名1: 参数; 变量名2: 参数){ 代码部分1: 变量名1; 代码部分2: 变量名2;}第5步，JS更改为jQuery形式，并且改进

　　其实这个改动不难，并且对数字时钟增加了年月日周。

　　原来的每个公共的判断方法提取出来，因为一般都是显示2位数，原来的小于2位，就自动在前面加个“0”，改进如下

function checkTime (i) { if (i < 10) {i = "0" + i; }return i; }hour = checkTime(hour);minute = checkTime(minute);second = checkTime(second);最终代码

　　clock.html

<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>时钟</title> <link href="../css/style.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="../js/clock.js"></script></head><body>   <ul class="minute_marks"></ul>  <ul class="digits"> <li>3</li> <li>5</li> <li>9</li> <li>12</li> </ul>     <ul class="minute_marks"></ul>  <ul class="digits"> <li>3</li> <li>6</li> <li>9</li> <li>12</li> </ul>    </body></html>mixin_clock.less

　　//传统挂钟//@clock_wh: 钟的宽度/高度//@clock_border: 钟的边框，50%为圆形，也可以设置成具体数值//@frame_bgc1: 表盘背景渐变色1//@frame_bgc2: 表盘背景渐变色2//@mm_bgc: 刻度背景色//@digits_c: 表盘数字文字颜色//@hh_bgc: 时针背景颜色//@mh_bgc：分针背景颜色//@sh_bgc：秒针背景颜色.mixin_basic_clock(@clock_wh: 30em; @clock_border: 50%; @frame_bgc1:#fff; @frame_bgc2:#ccc; @mm_bgc: #666; @digits_c: #555; @hh_bgc:#232425; @mh_bgc: #343536; @sh_bgc: #c00) { //@digits: 表盘文字中心距离 //@digits_s: 表盘文字大小 //@clock_center: 表盘中心大小 @digits: @clock_wh / 4.2; @digits_s: @clock_wh / 20; @clock_center: @clock_wh / 8; // 表盘 .frame_face { position: relative; width: @clock_wh; height: @clock_wh; border-radius: @clock_border; background: linear-gradient(180deg, #f9f9f9, #666); box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8); &:before { content: ''; width: @clock_wh * 0.98; height: @clock_wh * 0.98; border-radius: @clock_border; position: absolute; top: @clock_wh * 0.01; left: @clock_wh * 0.01; background: radial-gradient( ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100% ); } &:after { content: ''; width: @clock_wh * 0.94; height: @clock_wh * 0.94; border-radius: @clock_border; position: absolute; top: @clock_wh * 0.03; left: @clock_wh * 0.03; box-shadow: inset rgba(0, 0, 0, 0.2) 0.2em 0.2em 1em; // border: (@clock_wh * 0.001) solid rgba(0, 0, 0, 0.2); background: linear-gradient(180deg, @frame_bgc1, @frame_bgc2); } } // 刻度 .minute_marks li { display: block; width: 0.2em; height: 0.6em; background: @mm_bgc; position: absolute; top: 50%; left: 50%; margin: -0.4em 0 0 -0.1em; z-index: 8; } // 刻度数字 .digits { width: @clock_wh; height: @clock_wh; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin-top: -@clock_wh / 2; margin-left: -@clock_wh / 2; padding: 0; z-index: 9; li { font-size: @digits_s; display: block; width: @digits_s; height: @digits_s; position: absolute; top: 50%; left: 50%; line-height: @digits_s; text-align: center; margin: (-@digits_s / 2) 0 0 (-@digits_s / 2); font-weight: bold; color: darken(@digits_c, 10%); &:nth-child(1) { transform: translate(@digits, 0); } &:nth-child(2) { transform: translate(0, @digits); } &:nth-child(3) { transform: translate(-@digits, 0); } &:nth-child(4) { transform: translate(0, -@digits); } } } // 时针 .hours_hand { width: 0.8em; height: 7em; border-radius: 0 0 0.9em 0.9em; background: @hh_bgc; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -0.8em -0.4em; box-shadow: @hh_bgc 0 0 2px; transform-origin: 0.4em 6.2em; transform: rotate(-25deg); z-index: 21; &:before { content: ''; background: inherit; width: 1.8em; height: 0.8em; border-radius: 0 0 0.8em 0.8em; box-shadow: @hh_bgc 0 0 1px; position: absolute; top: -0.7em; left: -0.5em; } &:after { content: ''; width: 0; height: 0; border: 0.9em solid @hh_bgc; border-width: 0 0.9em 2.4em 0.9em; border-left-color: transparent; border-right-color: transparent; position: absolute; top: -3.1em; left: -0.5em; } } // 分针 .minutes_hand { width: 0.6em; height: 12.5em; border-radius: 0.5em; background: @mh_bgc; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -1.5em -0.3em; box-shadow: @mh_bgc 0 0 2px; transform-origin: 0.3em 11em; z-index: 22; } // 秒针 .seconds_hand { width: 0.2em; height: 14em; border-radius: ~'0.1em 0.1em 0 0 / 10em 10em 0 0'; background: @sh_bgc; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -2em -0.1em; box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em; transform-origin: 0.1em 12em; z-index: 23; &:before { content: ''; width: 0.6em; height: 3em; border-radius: ~'0.2em 0.2em 0.4em 0.4em / 0.2em 0.2em 2em 2em'; box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em; background: inherit; position: absolute; left: 50%; bottom: -3em; margin-left: -0.3em; } &:after { content: ''; width: 1em; height: 1em; border-radius: 50%; background: inherit; position: absolute; left: 50%; bottom: 1.5em; margin-left: -0.5em; } } //中心点 .clock_center { &:before { content: ''; width: 1.6em; height: 1.6em; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -0.8em 0 0 -0.8em; background: #121314; z-index: 10; } &:after { content: ''; width: @clock_center; height: @clock_center; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: (-@clock_center / 2) 0 0 (-@clock_center / 2); border: 0.1em solid #c6c6c6; background: radial-gradient( ellipse at center, rgba(200, 200, 200, 0), rgba(190, 190, 190, 1) 90%, rgba(130, 130, 130, 1) 100% ); z-index: 11; } }}// 数字时钟//@clock_w: 时钟宽度//@clock_fs1: 文字大小1//@clock_fs2: 文字大小2//@clock_bgc1: 时钟背景色1//@clock_bgc2: 时钟背景色2//@clock_fc: 时钟文字颜色.mixin_digital_clock(@clock_w: 30em; @clock_fs1: 2em; @clock_fs2: 5em; @clock_bgc1:#0a2e38; @clock_bgc2:#000; @clock_fc: #daf6ff) { width: @clock_w; border-radius: 0.6em; padding: 1em; overflow: hidden; background: @clock_bgc1; background: radial-gradient(ellipse at center, @clock_bgc1 0%, @clock_bgc2 70%); .num { padding: 0.1em; color: @clock_fc; text-align: center; word-break: keep-all; letter-spacing: 0.05em; font-family: 'Share Tech Mono', Consolas, monaco, monospace; text-shadow: ~'0 0 20px #0aafe6, 0 0 20px rgb(10 175 230 / 0%)'; } .digit_ymd { font-size: @clock_fs1; } .digit_hms { font-size: @clock_fs2; }}style.less

　　//公共文件夹根目录@resource_path: '../resource';// 组件扩展@import '@{resource_path}/mixin_clock';//圆形挂钟.circle_clock { .mixin_basic_clock(); display: inline-block; margin: 2em;}//方形挂钟.squire_clock { .mixin_basic_clock(@clock_border: 2em; @frame_bgc1:#90bef3; @frame_bgc2:#616fad; @mm_bgc: #333;); display: inline-block; margin: 2em;}//数字时钟.digital_clock { .mixin_digital_clock(); margin: 2em;}clock.js

标签：网站优化

上一篇：只是拍个照录个像？那你误解太深了，一文读懂汽车摄像头的作用

下一篇：返回列表

用css3制作2种效果的在线时钟_LESS改进版

相关推荐

只是拍个照录个像？那你误解太深了，一文读懂汽车摄像头的作用

分享完美给宏碁墨舞P50重装win7系统教程

H5商城免费源码_H5商城建站应该怎么做_OctShop

新兴市场央行再现“加息潮”