用CSS做了一个时钟，有几行代码还真难住了我，能找出来算你赢

风晓
风晓 2023-12-28 14:12:48 51508 赞同 0 反对 0
分类： 资源
javascript写特效写多了，今天想换个风格，就用CSS写个小时钟玩下吧。 用CSS3做一个小小的时钟，跟现实中的时钟，功能一样，都能实现看时间的效果。

1. 简介

 

2. 制作时钟的思路

  1. 第一步画表盘

  2. 第二步添加时针，分针，秒针

  3. 第三步设置指针

3. 代码

3.1画表盘

 

你会好奇，为什么数字都会在一块，因为定位了啊，那么，怎么让他们分开？可以用循环变换角度。。。

 

又有问题了，那字怎么倒了啊，怎么整啊？在反转回去，这里别反转div，要是反转div的话，字又回去了，那你看我的HTML结构，我在反转span标签就欧克了。

 

3.2 添加时针，分针，秒针

 

3.3 设置指针

动图封面
 

 

4. 完整代码

 

 

今天的这个案例就写完了，希望大家能够学习到东西。

因为之前有很多案例都是javascript做的，有些人也想我用CSS做几个试试，让他们学学，所以今天才有了这篇文章。

学习javascript也是有难度的，前提是你的html和css学的应该要很号，您不能连html这东东是干啥的都不知道就开始学javascript了，学乘除前，学好加减法总是有益无害的。

再说几点建议：

  1. 不要急着看一些复杂的javascript网页特效的代码，这样除了打击你的自信心，什么也学不到

  2. 看网上什么几天精通javascript的，直接跳过吧，会浪费你很多时间

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

风晓
风晓L1
粉丝 1 资源 2038 + 关注 私信
最近热门资源
银河麒麟桌面操作系统备份用户数据  123
统信桌面专业版【全盘安装UOS系统】介绍  118
银河麒麟桌面操作系统安装佳能打印机驱动方法  109
银河麒麟桌面操作系统 V10-SP1用户密码修改  103
最近下载排行榜
银河麒麟桌面操作系统备份用户数据 0
统信桌面专业版【全盘安装UOS系统】介绍 0
银河麒麟桌面操作系统安装佳能打印机驱动方法 0
银河麒麟桌面操作系统 V10-SP1用户密码修改 0
作者收入月榜
1

prtyaa 收益393.62元

2

zlj141319 收益218元

3

1843880570 收益214.2元

4

IT-feng 收益209.03元

5

风晓 收益208.24元

6

777 收益172.71元

7

Fhawking 收益106.6元

8

信创来了 收益105.84元

9

克里斯蒂亚诺诺 收益91.08元

10

技术-小陈 收益79.5元

请使用微信扫码

加入交流群

请使用微信扫一扫!