practice css_analog_watch

<!DOCTYPE html>
<html>
<head>
<style>

.watch-container{
width:250px;
height:250px;
position:relative;
border:1px solid black;
}
.watch{
position:absolute;
width:80%;
height:80%;
border-radius:50%;
border:10px solid rgb(210,210,210);
border-radius:50%;
background-color:rgb(250,250,250);
left:6%;
top:6%;
}
.left-ear, .right-ear{
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
top:9%;
z-index:-1;
}
.left-ear{
left:3%;
transform:rotateZ(-45deg);
-webkit-transform:rotateZ(-45deg);  /*For safari*/
}
.right-ear{
right:3%;
transform:rotateZ(45deg);
-webkit-transform:rotateZ(45deg);  
}  		
.center{
width:5%;
height:5%;
border-radius:50%;
background-color:black;
position:absolute;
left:47.5%;
top:47.5%;
}

.hours-needle{
transform:rotateZ(0deg);
transform-origin:bottom;
width:2%;
height:25%;
background:red;
position:absolute;
left:49%;
top:25%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.minutes-needle{
width:2%;
height:32.5%;
background:green;
transform:rotateZ(10deg);
-webkit-transform:rotateZ(10deg);
transform-origin:bottom;
-webkit-transform-origin:bottom;
position:absolute;
left:49%;
top:17.5%;
border-top-left-radius:100%;
border-top-right-radius:100%;
} 
.seconds-needle{
transform:rotateZ(20deg);
-webkit-transform:rotateZ(20deg);  
transform-origin:bottom;
-webkit-transform-origin:bottom;  
width:2%;
height:40%;
background:blue;
position:absolute;
left:49%;
top:10%;
border-top-left-radius:50%;
border-top-right-radius:50%;
} 
.left-leg, .right-leg{
position:absolute;
bottom:6%;
width:16%;
height:1.2%;
background-color:rgb(210,210,210);
border-radius:20%;
}  
.left-leg{  
left:9.6%;  
transform:rotateZ(-45deg); 
-webkit-transform:rotateZ(-45deg); /* For safari */
transform-origin:left;
-webkit-transform-origin:left;  /* For safari */
}  
.right-leg{
right:9.6%;
transform:rotateZ(45deg);
-webkit-transform:rotateZ(45deg);  
transform-origin:right;
-webkit-transform-origin:right;
}  
.numbers{
height:6%; 
width:85%; 
position:absolute; 
top:46%;
left:7.5%;
border:1px solid black;  
}

</style>
</head>
<body>
<div class="watch-container">
<div class="watch">
 <div class="numbers"><span style="float:left; ">9</span><span style="float:right;">3</span></div>
 
 <div class="numbers" style="-webkit-transform:rotateZ(30deg);"><span style="float:left; -webkit-transform:rotateZ(-30deg);">10</span><span style="float:right; -webkit-transform:rotateZ(-30deg);">4</span></div>
 
 <div class="numbers" style="-webkit-transform:rotateZ(60deg);"><span style="float:left; -webkit-transform:rotateZ(-60deg);">11</span><span style="float:right; -webkit-transform:rotateZ(-60deg);">5</span></div>
 
 <div class="numbers" style="-webkit-transform:rotateZ(90deg);"><span style="float:left; -webkit-transform:rotateZ(-90deg);">12</span><span style="float:right; -webkit-transform:rotateZ(-90deg);">6</span></div>
 
 <div class="numbers" style="-webkit-transform:rotateZ(120deg);"><span style="float:left; -webkit-transform:rotateZ(-120deg);">1</span><span style="float:right; -webkit-transform:rotateZ(-120deg);">7</span></div>
 
 <div class="numbers" style="-webkit-transform:rotateZ(150deg);"><span style="float:left; 
   -webkit-transform:rotateZ(-150deg);">2</span><span style="float:right; -webkit-transform:rotateZ(-150deg);">8</span></div>
 <span class="center"> </span>
 <span class="hours-needle"> </span>
 <span class="minutes-needle"> </span>
 <span class="seconds-needle"> </span>
</div>
 <span class="left-ear"> </span>
 <span class="right-ear"> </span>
 <span class="left-leg"></span>
 <span class="right-leg"></span>

</div>
</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>​.watch-container{width:250px;height:250px;position:relative;border:1px solid black;}.watch{position:absolute;width:80%;height:80%;border-radius:50%;border:10px solid rgb(210,210,210);border-radius:50%;background-color:rgb(250,250,250);left:6%;top:6%;}.left-ear, .right-ear{width:40%;height:40%;border-radius:45%;border:none;background-color:rgba(15,157,88,1);position:absolute;top:9%;z-index:-1;}.left-ear{left:3%;transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);  /*For safari*/}.right-ear{right:3%;transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);  }       .center{width:5%;height:5%;border-radius:50%;background-color:black;position:absolute;left:47.5%;top:47.5%;}​​.hours-needle{transform:rotateZ(0deg);transform-origin:bottom;width:2%;height:25%;background:red;position:absolute;left:49%;top:25%;border-top-left-radius:50%;border-top-right-radius:50%;}.minutes-needle{width:2%;height:32.5%;background:green;transform:rotateZ(10deg);-webkit-transform:rotateZ(10deg);transform-origin:bottom;-webkit-transform-origin:bottom;position:absolute;left:49%;top:17.5%;border-top-left-radius:100%;border-top-right-radius:100%;} .seconds-needle{transform:rotateZ(20deg);-webkit-transform:rotateZ(20deg);  transform-origin:bottom;-webkit-transform-origin:bottom;  width:2%;height:40%;background:blue;position:absolute;left:49%;top:10%;border-top-left-radius:50%;border-top-right-radius:50%;} .left-leg, .right-leg{position:absolute;bottom:6%;width:16%;height:1.2%;background-color:rgb(210,210,210);border-radius:20%;}  .left-leg{  left:9.6%;  transform:rotateZ(-45deg); -webkit-transform:rotateZ(-45deg); /* For safari */transform-origin:left;-webkit-transform-origin:left;  /* For safari */}  .right-leg{right:9.6%;transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);  transform-origin:right;-webkit-transform-origin:right;}  .numbers{height:6%; width:85%; position:absolute; top:46%;left:7.5%;border:1px solid black;  } ​</style></head><body><div class="watch-container"><div class="watch"> <div class="numbers"><span style="float:left; ">9</span><span style="float:right;">3</span></div>  <div class="numbers" style="-webkit-transform:rotateZ(30deg);"><span style="float:left; -webkit-transform:rotateZ(-30deg);">10</span><span style="float:right; -webkit-transform:rotateZ(-30deg);">4</span></div>  <div class="numbers" style="-webkit-transform:rotateZ(60deg);"><span style="float:left; -webkit-transform:rotateZ(-60deg);">11</span><span style="float:right; -webkit-transform:rotateZ(-60deg);">5</span></div>  <div class="numbers" style="-webkit-transform:rotateZ(90deg);"><span style="float:left; -webkit-transform:rotateZ(-90deg);">12</span><span style="float:right; -webkit-transform:rotateZ(-90deg);">6</span></div>  <div class="numbers" style="-webkit-transform:rotateZ(120deg);"><span style="float:left; -webkit-transform:rotateZ(-120deg);">1</span><span style="float:right; -webkit-transform:rotateZ(-120deg);">7</span></div>  <div class="numbers" style="-webkit-transform:rotateZ(150deg);"><span style="float:left;    -webkit-transform:rotateZ(-150deg);">2</span><span style="float:right; -webkit-transform:rotateZ(-150deg);">8</span></div> <span class="center"> </span> <span class="hours-needle"> </span> <span class="minutes-needle"> </span> <span class="seconds-needle"> </span></div> <span class="left-ear"> </span> <span class="right-ear"> </span> <span class="left-leg"></span> <span class="right-leg"></span>​</div></body></html>                                     

Share