首先要明确, 表盘一周是 360° 并有 60 个小刻度. 也就是每个刻度从 0°(12 点位置)开始递加 6°. 拿其中 5 个刻度为例, 代码如下:
html 代码布局:
- <ul id="ul1">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
CSS 样式表:(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
- /* 清除默认样式 */
- *{margin: 0;padding: 0}
- li{list-style: none}
- /* 将表盘设置成半径为 100px 的原型, 并为其加上边框 */
- #ul1{
- width: 200px;height: 200px;
- border: 1px solid #000;
- border-radius: 50%;
- position: relative;
- }
- /* 设置每个刻度的宽高, 这里用定位将他们都定在表盘 12 点 (0°) 的位置, 也就是 ul1 的宽度的一半.
- 并设置它们的选择奇点( -webkit-transform-origin: 0 100px), 围绕着 ul1 的中心分布,
- 也就是 ul1 高度的一半 */
- li{
- width: 2px;height: 6px;
- background: black;
- position:absolute;
- left:100px;top:0;
- -webkit-transform-origin: 0 100px;
- }
- /* 这里利用 css3 的子元素选择器(因为本人懒, 不想命名 class), 设置 5 个刻度的位置 */
- li:nth-child(1){ -webkit-transform: rotate(0deg);}
- li:nth-child(2){ -webkit-transform: rotate(6deg);}
- li:nth-child(3){ -webkit-transform: rotate(12deg);}
- li:nth-child(4){ -webkit-transform: rotate(18deg);}
- li:nth-child(5){ -webkit-transform: rotate(24deg);}
效果如下:
这里就简单的将 5 个刻度设置好了, 是不是很简单呢!
接下来咱们就用 JS 代码动态创建.
- /* 先获取表盘 ul1 */
- var oUl = document.getElementById('ul1');
- /* 因为是 60 个刻度嘛, 我们就创建 60 个 li, 并设置它们的旋转角度 */
- for (var i=0;i<60;i++){
- var oLi = document.createElement('li');
- /* 因为 i 是从 0~60, 而每个刻度的旋转角度 360°÷60=6°, 所以每个刻度的旋转角度就是 i*6° */
- oLi.style.webkitTransform = 'rotate('+ i*6 +'deg)';
- oUl.appendChild(oLi);
- }
另: 是不是每 5 个就有一个与众不同的 li. 所以这里就在 CSS 中设置每隔 5n 个设置一下, 代码如下:
- li:nth-of-type(5n){
- height: 14px;
- width: 5px;
- }
创建好的效果如下:
来源: http://www.css88.com/qa/css3/14622.html