<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> ???<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ???<meta name="format-detection" content="telephone=no"> ???<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" type="text/css"> ???<title>CSS3时钟</title> ???<style> ???????body { ???????????/*background-color: #ccc;*/ ???????} ???????ol,ul { ???????????margin: 0; ???????????padding: 0; ???????????list-style: none; ???????} ???????h1{ ???????????text-align: center; ???????????color: #333; ???????????margin-top: 40px; ???????????font-family: ‘Microsoft Yahei‘; ???????} ????????.clock{ ???????????position: relative; ???????????width: 200px; ???????????height: 200px; ???????????border-radius: 100%; ???????????background-color: #292a38; ???????????margin: 50px auto; ???????} ???????.pointer li.circle{ ???????????position: absolute; ???????????top: 50%; ???????????left: 50%; ???????????transform-origin: left center; ???????????background:#fff; ???????????width: 10px; ???????????height: 10px; ???????????border-radius: 100%; ???????????margin-top: -5px; ???????????margin-left: -5px; ???????} ???????/*.line-demo{ ???????????position: absolute; ???????????left: 50%; ???????????top: 50%; ???????????transform: rotate(-60deg) translate(75px,-50%); ???????????transform-origin: left center; ???????????width: 20px; ???????????height: 10px; ???????????background-color: red; ???????????z-index: 1; ???????} */ ???????/*刻度*/ ???????.line-hour li,.line-min li{ ???????????position: absolute; ???????????left: 50%; ???????????top: 50%; ???????????transform-origin:left center; ???????????background-color: #fff; ????????} ???????.line-hour li{ ???????????width: 10px; ???????????height: 2px; ???????} ???????.line-min li{ ???????????width: 5px; ???????????height: 2px; ???????} ???????/*数字*/ ???????.number { ???????????position: absolute; ???????????height: 150px; ???????????width: 150px; ???????????left: 50%; ???????????top: 50%; ???????????transform: translate(-50%, -50%); ???????????font-family: ‘Microsoft Yahei‘; ???????????font-size: 15px; ???????????color: #fff; ???????} ???????.number li { ???????????position: absolute; ???????????transform: translate(-50%, -50%); ???????} ???????/*指针*/ ???????.pointer li{ ???????????position: absolute; ???????????top: 50%; ???????????left: 50%; ???????????transform-origin: left center; ???????????background:#fff; ???????} ???????.pointer li.hour{ ???????????width: 45px; ???????????height: 3px; ???????????margin-top: -1px; ???????} ???????.pointer li.min{ ???????????width: 60px; ???????????height: 2px; ???????????margin-top: -1px; ???????} ???????.pointer li.sec{ ???????????width: 45px; ???????????height: 3px; ???????????margin-top: -1px; ???????} ???</style></head><body> ???<h1>css 始终效果演示</h1> ???<div class="clock"> ???????<ul class="line-min"></ul> ???????<ul class="line-hour"> ???????????<li class="line-demo"></li> ???????</ul> ???????<ol class="number"></ol> ???????<ul class="pointer"> ???????????<li class="hour"></li> ???????????<li class="min"></li> ???????????<li class="sec"></li> ???????????<li class="circle"></li> ???????</ul> ???</div> ???<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script> ???<script> ???????$(function(){ ???????????function init(){ ???????????????drawLines($(‘.line-min‘),60,85); ???????????????drawLines($(‘.line-hour‘),12,80); ????????????????drawNumbers($(‘.number‘)); ???????????????move(); ???????????} ???????????init(); ???????????// 绘制钟表刻度线 ???????????//@param wrap 刻度线的父容器 ???????????//@param total 刻度线的总个数 ???????????//@param translateX 刻度线在x轴方向的偏移量 ???????????function drawLines(wrap,total,translateX){ ???????????????var gap = 360/total; ???????????????var strHtml = ""; ???????????????for(var i=0;i<total;i++){ ???????????????????strHtml += ‘<li style="transform:rotate(‘+(i*gap)+‘deg)translate(‘+translateX+‘px,-50%)"></li>‘; ???????????????} ???????????????wrap.html(strHtml); ???????????} ???????????// 绘制时钟数字 ???????????//@param wrap 数字的父容器 ???????????function drawNumbers(wrap){ ???????????????var radius = wrap.width() / 2; ???????????????var strHtml = ‘‘; ???????????????for(var i=1;i<=12;i++){ ???????????????????var myAngle = (i-3)/6 * Math.PI; ???????????????????var myX = radius + radius*Math.cos(myAngle), //x= r+rcos(0) ???????????????????????myY = radius + radius*Math.sin(myAngle); //y= r+rsin(0) ???????????????????????strHtml += ‘<li style="left:‘ + myX + ‘px; top:‘ +myY + ‘px">‘ +i + ‘</li>‘; ???????????????} ???????????????wrap.html(strHtml); ???????????} ???????????//钟表走动，转动秒针、分针、时针 ???????????function move(){ ???????????????//获取指针 ???????????????var domHour = $(‘.hour‘), ???????????????????domMin = $(‘.min‘), ???????????????????domSec = $(‘.sec‘); ???????????????setInterval(function(){ ???????????????????var now = new Date(), ???????????????????????hour = now.getHours(), ???????????????????????min = now.getMinutes(), ???????????????????????sec = now.getSeconds(); ???????????????????var secAngle = sec*6 - 90, ???????????????????????minAngle = min*6 + sec*0.1 - 90, ???????????????????????hourAngle = hour*30 + min*0.5 - 90; ???????????????????domSec.css(‘transform‘,‘rotate(‘+secAngle+‘deg)‘); ???????????????????domMin.css(‘transform‘,‘rotate(‘+minAngle+‘deg)‘); ???????????????????domHour.css(‘transform‘,‘rotate(‘+hourAngle+‘deg)‘); ???????????????????document.title = hour + ‘:‘ + min + ‘:‘ +sec; ???????????????},1000); ???????????} ???????}) ???</script></body></html>css3 简易时钟
原文地址：https://www.cnblogs.com/Byme/p/8331323.html