CSS3 uses transform to create a moving 2D clock

Now that we have finished the transform course, let’s take a look at an example. We will use transform ’s rotate to create a clock, and then use JavaScript’s timer to make it tick.

Take a screenshot:

Case knowledge point analysis:

1. Use positioning to complete the drawing of the clock.

2. The background uses a radial gradient.

3. Use JavaScript to complete the rotation of scales and time numbers.

4. Use the Date() object to obtain the system time and let the hour hand point to the corresponding scale.

5. Use the timer to continuously update the time and complete the movement of the hour hand.

1. HTML source code

<div id="clock-wrap">
	<div id="clock">
    	<ul id="list">
        </ul>
    </div>
    <div id="num">
    	<ul>
        	<li>12</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
        </ul>
    </div>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="circle"></div>
</div>

2. CSS style

<style id="css">/*Note that an id is added to the style tag, which is obtained in JavaScript and the css style is added to it. */
body,ul{
	margin:0;
	padding:0;}
body{
	font:1em "microsoft Yahei";
	color:#666;
	background-color:#333;}
h1{
	text-align:center;
	color:#eee;
	font-size:3rem;}
li{
	list-style:none;}
p{
	text-align:center;
	color:#ddd;
	position:relative;
	top:100px;
	}
a{
	color:#999;
	text-decoration:none;
	transition:0.2s;}
a:hover{
	color:#ddd;}
#clock-wrap{
	width:400px;
	height:400px;
	border:10px solid #fff;
	border-radius:50%;
	margin:80px auto 0;
	position:relative;
	box-shadow:0 0 40px rgba(0,0,0,1)}
#clock ul{
	width:400px;
	height:400px;
	position:relative;
	border-radius:50%;
	background:radial-gradient(circle at center,#667eea,#764ba2);
	box-shadow:0 0 50px rgba(0,0,0,0.5) inset; /*Set inner shadow*/
	}
#clock ul li{
	position:absolute;
	left:50%;
	margin-left:-2px;
	top:0;
	width:4px;
	height:10px;
	background:rgba(255,255,255,.5);
	transform-origin:center 200px; /*li's rotation center is in the middle of the circle. */
	}
#clock li:nth-child(5n+1){ /*5 scales form a group, and the first scale of each group should be longer. */
	height:18px;
	}
#num{
	position:absolute;
	width:360px;
	height:360px;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	}
#num li{
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:0;
	color:rgba(255,255,255,.5);
	font:2em Arial, Helvetica, sans-serif;	
	transform-origin:center 180px;}

#hour,#min,#sec
	background:#fff;
	position:absolute;
	left:50%;
	top:50%;
	transform-origin:bottom; /*The rotation point of the hour hand is at its bottom. */
	box-shadow:0 0 6px rgba(0,0,0,.5)
	}
#hour{
	width:14px;
	height:100px;
	margin-left:-7px;
	margin-top:-100px;
	border-radius:3px;
	}
#min{
	width:10px;
	height:150px;
	margin-left:-5px;
	margin-top:-150px;
	border-radius:2px;
	}
#sec{
	width:4px;
	height:180px;
	margin-left:-2px;
	margin-top:-180px;
	border-radius:1px;
	}
#circle{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	left:50%;
	margin-left:-20px;
	top:50%;
	margin-top:-20px;
	box-shadow:0 0 20px rgba(0,0,0,.4)}
</style>

3. JavaScript code

<script>
window.onload = function(){
	var oList = document.getElementById("list");
	var oCSS=document.getElementById("css"); //The style tag can also add an id attribute.
	var aNums = document.getElementById("num").getElementsByTagName("li");
	var oHour = document.getElementById("hour");
	var oMin = document.getElementById("min");
	var oSec=document.getElementById("sec");
	var aLi="";
	var sCSS="";
	for(var i=0;i<60;i++){ //Loop 60 times to generate the scale value and the degree of rotation of each scale.
		aLi+="<li></li>";
		sCSS+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"
		}
	for(var i=0;i<12;i++){
		sCSS+="#num li:nth-child("+(i+1)+"){transform:rotate("+i*30+"deg);}"
		}
	oList.innerHTML=aLi;
	oCSS.innerHTML+=sCSS; //css needs to be appended to the original css document.
	
	
	
	myTime(); //Initialization function.
	setInterval(myTime,1000); //Set the timer to execute the function every 1 second.
	function myTime(){
		var oDate=new Date();
		var iSec=oDate.getSeconds(); 
		//Minutes with precision to seconds.
		var iMin=oDate.getMinutes()+iSec/60; 
		//Hours accurate to minutes and seconds. Can be more precise when rotating.
		var iHour=oDate.getHours()+iMin/60;
		
		oSec.style.transform="rotate("+iSec*6+"deg)";
		oMin.style.transform="rotate("+iMin*6+"deg)";
		oHour.style.transform="rotate("+iHour*30+"deg)"; //The direction of the hour hand needs to include minutes and seconds to be accurate.
		}
	
	}
</script>

The above is the details of using CSS3 transform to create a moving 2D clock. For more information about CSS3 transform, please pay attention to other related articles on 123WORDPRESS.COM!

<<: base target="" controls the link's target open frame

>>: JavaScript implements single linked list process analysis