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{
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
left:3%;
top:9%;
transform:rotateZ(-45deg);
z-index:-1;
}
.right-ear{
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
right:3%;
top:9%;
transform:rotateZ(45deg);
z-index:-1;
}  
.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);
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);
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%;
} 
</style>
</head>
<body>
  
<div class="watch-container">
  <div class="watch">
    <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>
</div>
  
</body>
</html>

Share