Tất cả bài viết | CSS3

Hướng dẫn tạo đồng hồ cho website bằng CSS3 chuẩn RWD

Mã HTML

Định nghĩa CSS3 keyframes:

@-webkit-keyframes rotation {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
}  
@-moz-keyframes rotation {      
      from { -moz-transform: rotate(0deg); }
      to { -moz-transform: rotate(360deg); }
}  
@-o-keyframes rotation {
      from { -o-transform: rotate(0deg); }
      to { -o-transform: rotate(360deg); }
} 
@keyframes rotation {      
      from { transform: rotate(0deg); }      
      to { transform: rotate(360deg); }
}

Định nghĩa các thuộc tính CSS như sau:

.clock-case {
background-color: #62696F;
padding: 8%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; 
}
 .clock-dial {
background-color: #CECED0;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; 
} 
.clock-ratio {
padding-bottom: 100%;
height: 0;
overflow: hidden; 
}
 .clock-second-hand {
width: 2%;
height: 100%;
margin-left: -1%;
position: absolute;
left: 50%;
-webkit-animation: rotation 60s infinite linear;
-moz-animation: rotation 60s infinite linear;
-o-animation: rotation 60s infinite linear;
animation: rotation 60s infinite linear; 
}
 .clock-second-hand:before {
content: "";   
background-color: red;   
width: 100%;   
height: 55%;   
top: 4%;  
position: absolute; 
} 
.clock-minute-hand {   
width: 3%;   
height: 100%;   
margin-left: -1.5%;   
position: absolute;   
left: 50%;  
-webkit-animation:  rotation 3600s infinite linear;  
-moz-animation: rotation 3600s infinite linear;  
-o-animation: rotation 3600s infinite linear;  
animation: rotation 3600s infinite linear;
} 
.clock-minute-hand:before {  
content: "";  
background-color: #404040;  
width: 100%;  
height: 50%;  
top: 8%;  
position: absolute;
} 
.clock-hour-hand {  
width: 4%;  
height: 100%;  
margin-left: -2%;  
position: absolute;  
left: 50%;  
-webkit-animation: 
rotation 43200s infinite linear;  
-moz-animation: rotation 43200s infinite linear;  
-o-animation: rotation 43200s infinite linear; 
animation: rotation 43200s infinite linear;
} 
.clock-hour-hand:before {  
content: "";  
background-color: #000000;  
width: 100%;  
height: 46%;  
top: 12%;  
position: absolute;
} 
.clock-nut {  
position: absolute;  
top: 46%;  
left: 46%;  
width: 8%;  
height: 8%;  
background-color: #000000;  
-webkit-border-radius: 50%;  
-moz-border-radius: 50%;  
border-radius: 50%;
}

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất