javascript写特效写多了,今天想换个风格,就用CSS写个小时钟玩下吧。
用CSS3做一个小小的时钟,跟现实中的时钟,功能一样,都能实现看时间的效果。
这里还是要说一下我自己建的前端学习群:594959296,从我一个人到现在的1755个都是看我每一篇文章看我每一个案例来的,可以说都是我们大前端的学霸啊,不定期分享干货。想学到东西的都可以来,欢迎初学和进阶中的小伙伴
1. 简介
2. 制作时钟的思路
第一步画表盘
第二步添加时针,分针,秒针
第三步设置指针
3. 代码
3.1画表盘
你会好奇,为什么数字都会在一块,因为定位了啊,那么,怎么让他们分开?可以用循环变换角度。。。
又有问题了,那字怎么倒了啊,怎么整啊?在反转回去,这里别反转div,要是反转div的话,字又回去了,那你看我的HTML结构,我在反转span标签就欧克了。
3.2 添加时针,分针,秒针
3.3 设置指针
4. 完整代码
今天的这个案例就写完了,希望大家能够学习到东西。
因为之前有很多案例都是javascript做的,有些人也想我用CSS做几个试试,让他们学学,所以今天才有了这篇文章。
学习javascript也是有难度的,前提是你的html和css学的应该要很号,您不能连html这东东是干啥的都不知道就开始学javascript了,学乘除前,学好加减法总是有益无害的。
再说几点建议:
不要急着看一些复杂的javascript网页特效的代码,这样除了打击你的自信心,什么也学不到
看网上什么几天精通javascript的,直接跳过吧,会浪费你很多时间
这个案例就算做完了,想要完整代码自己练习的小伙伴进我的群自助领取,已经上传到群文件里了,群号:594959296,欢迎学习交流的小伙伴过来一起学习交流。
如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号:‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频
还没有评论,来说两句吧...