[五步工作法]五步轻松实现JavaScript HTML时钟效果

更新时间:2024-03-14    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

学了一段时间的HTML、CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图:

涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的老师了~)
 接下来,我们用5步来制作它

step1、准备HTML

首先,我们需要准备HTML结构,背景、表盘、指针(时针、分针、秒针)、数字。

 
  
   
   
   
   
  
 


step2、准备CSS

定义好指针的颜色和大小,需要说明的是transform: rotate(-90deg); 用来旋转指针,transform-origin:0 6px; 用来设置旋转中心点。

本文来源:http://www.bbyears.com/css/141935.html

猜你感兴趣