Tạo đồng hồ với CSS

  Bài viết hay nhất1
HTML:

<div class="clock">

<div class="clock__hour-markers">

<div class="hour-marker"></div>
<!-- /.hour-marker -->
<div class="hour-marker"></div>
<!-- /.hour-marker -->
<div class="hour-marker"></div>
<!-- /.hour-marker -->
<div class="hour-marker"></div>
<!-- /.hour-marker -->
<div class="hour-marker"></div>
<!-- /.hour-marker -->
<div class="hour-marker"></div>
<!-- /.hour-marker -->

</div>
<!-- /.clock__hour-markers -->

<div class="clock__hour">12</div>
<!-- /.clock__hour -->

<div class="clock__second-hand"></div>
<!-- /.second-hand -->

<div class="clock__minute-hand"></div>
<!-- /.clock__minute-hand -->

</div>
<!-- /.clock -->



CSS:

// Imports
@import 'bourbon';

// Variables

// Colors
$color-pink: #f0afcf;
$color-pink-light: lighten( $color-pink, 5% );
$color-blue: #7ec4e7;
$color-blue-light: lighten( $color-blue, 5% );
$color-black: #181818;
$color-gray: #373737;
$color-white: #fff;
$color-yellow: #ece492;
$color-magenta: #f2569d;

// Fonts
@import url(https://fonts.googleapis.com/css?family=Comfortaa:700);
$font-primary: 'Comfortaa', sans-serif;

// CSS
*, *:before, *:after {
box-sizing: border-box;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}

body {
@include background( linear-gradient( top left, $color-pink-light 0%, $color-pink 50%, $color-blue-light 50%, $color-blue 75% ) );
font-family: $font-primary;
font-weight: bold;
}// body

.clock {
@include transform( translate3d(-50%,-50%,0) );
background-color: $color-black;
border: 10px solid $color-gray;
border-radius: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 10px 10px 55px rgba(0, 0, 0, 0.Cool;
height: 460px;
left: 50%;
position: fixed;
top: 50%;
width: 460px;

&__hour-markers {
height: 100%;
width: 100%;
}// .clock__hour-markers

&__second-hand, &__minute-hand {
@include transform-origin(30px 5px);
border-radius: 5px;
height: 10px;
margin: -5px 10px 0 0;
position: absolute;
right: 0;
top: 50%;
width: 240px;
}// .clock__second-hand, .clock__minute-hand

&__second-hand {
@include transition( transform 100ms ease-out );
background-color: $color-gray;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}// .clock__second-hand

&__minute-hand {
@include transition( transform 200ms ease-in-out );
background-color: $color-white;
box-shadow: 0 0 10px rgba(0,0,0,0.5);

&:before {
background-color: $color-black;
border-radius: 100%;
content: ' ';
display: block;
height: 5px;
left: 27px;
position: absolute;
top: 2px;
width: 5px;
}// .clock__minute-hand:before

}// .clock__minute-hand

&__hour {
@include background( radial-gradient( center right, $color-magenta 30%, $color-yellow 50% ) );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 280px;
position: absolute;
text-align: center;
top: 40px;
width: 100%;
} // .clock__hour

}// .clock

.hour-marker {
@include transform-origin( center );
height: 2px;
left: 0;
position: absolute;
top: 50%;
width: 100%;

&:before, &:after {
background-color: $color-gray;
content: ' ';
display: block;
height: 2px;
position: absolute;
width: 40px;
}// .hour-marker:before, .hour-marker:after

&:before {
left: 0;
}// .hour-marker:before

&:after {
right: 0;
}// .hour-marker:after

@for $i from 1 through 6 {

&:nth-child(#{$i}) {
@include transform( translate3d(0,-50%,0) rotate(#{30*$i}deg) );
}// .hour-marker:nth-child(#{$i})

}// @for

}// .hour-marker



JS:


(function() {

function setupClock() {
var date = new Date(),
timezone = (date.getTimezoneOffset() / 60), // Timezone offset in hours
hours = ( (date.getUTCHours() - timezone) <= 12 ? (date.getUTCHours() - timezone) : (date.getUTCHours() - timezone) - 12 ), // Hours
minutes = date.getUTCMinutes(), // Minutes
seconds = date.getUTCSeconds(), // Seconds
clockHour = document.querySelector('.clock__hour'), // Clock hour element
clockMinute = document.querySelector('.clock__minute-hand'),
clockSecond = document.querySelector('.clock__second-hand'),
minuteRotate = ((6 * minutes) - 90),
secondRotate = ((6 * seconds) - 90);

// Set the current time
clockHour.innerHTML = hours;
clockMinute.style.transform = 'rotate(' + minuteRotate + 'deg)';
clockSecond.style.transform = 'rotate(' + secondRotate + 'deg)';

// Update the time
setInterval(function() {

// Update Hour
if (minutes === 59) {
hours = (hours === 12 ? 1 : hours + 1);
clockHour.innerHTML = hours;
} // END if

// Update Minutes
if (seconds === 59) {
minuteRotate += 6;
minutes = (minutes === 59 ? 0 : minutes + 1);
clockMinute.style.transform = 'rotate(' + minuteRotate + 'deg)';
} // END if

// Update seconds
secondRotate += 6;
seconds = (seconds === 59 ? 0 : seconds + 1);
clockSecond.style.transform = 'rotate(' + secondRotate + 'deg)';

}, 1000);
}

setupClock();

window.onfocus = function() {
setupClock();
}

})();
Bạn không có quyền trả lời bài viết