Bài viết chia sẻ hướng dẫn tạo đồng hồ Analog bằng CSS3

Bài viết này HiFlyer sẽ hướng dẫn các bạn tạo đồng hồ Analog rất đẹp dựa trên thuộc tính transition và transform của CSS3. JavaScript cũng được áp dụng nhưng chỉ sử dụng để lấy giá trị thời gian hiện tại.

Đầu tiên bạn tạo một file hfclock.css có nội dung như sau

body.experiment {
    background: #fff;
}

.start {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 5em;
}

#clock {
    position: relative;
    width: 378px;
    height: 378px;
    background-image: url('../images/clockFace.png');
    left: 50%;
    margin: 5em 0 0 -189px;
}

#clock div {
    position: absolute;
}

/* The magic */
#clock img[src*='second'] {
    -webkit-transition: -webkit-transform 600000s linear;
    -moz-transition: -moz-transform 600000s linear;
    -o-transition: -o-transform 600000s linear;
    -ms-transition: -ms-transform 600000s linear;
    transition: transform 600000s linear;
}

#clock:target img[src*='second'] {
    -webkit-transform: rotate(3600000deg);
    -moz-transform: rotate(3600000deg);
    -o-transform: rotate(3600000deg);
    -ms-transform: rotate(3600000deg);
    -transform: rotate(3600000deg);
}

#clock img[src*='minute'] {
    -webkit-transition: -webkit-transform 360000s linear;
    -moz-transition: -moz-transform 360000s linear;
    -o-transition: -o-transform 360000s linear;
    -ms-transition: -ms-transform 360000s linear;
    transition: transform 360000s linear;
}

#clock:target img[src*='minute'] {
    -webkit-transform: rotate(36000deg);
    -moz-transform: rotate(36000deg);
    -o-transform: rotate(36000deg);
    -ms-transform: rotate(36000deg);
    transform: rotate(36000deg);
}

#clock img[src*='hour'] {
    -webkit-transition: -webkit-transform 216000s linear;
    -moz-transition: -moz-transform 216000s linear;
    -o-transition: -o-transform 216000s linear;
    -ms-transition: -ms-transform 216000s linear;
    transition: transform 216000s linear;
}

#clock:target img[src*='hour'] {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Sau đó tạo một file hfclock.js có nội dung

$(function(){

    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('div');

    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }

    if(window.location.hash === "#clock") {
        startClock();
        $('p.start').remove();
    } else {
        $('#start').click(function() {
            startClock();
            $('p.start').remove();
        });
    }

    function startClock() {
        var angle = 360/60,
            date = new Date(),
            hour = (function() {
                var h = date.getHours();
                if(h > 12) {
                    h = h - 12;
                }
                return h
            })(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourAngle = (360/12) * hour + (360/(12*60)) * minute;

        if(prop) {
            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
        }
    }
});

Cuối cùng bạn tạo một file hfclock.html có nội dung

<link rel="stylesheet" href="hfclock.css" />
<div id="experiment">
    <p><a href="#clock" id="start">Start Clock</a></p>
    <div id="clock">
        <div id="hour"><img src="/images/hourHand.png" /></div>
        <div id="minute"><img src="/images/minuteHand.png" /></div>
        <div id="second"><img src="/images/secondHand.png" /></div>
    </div>
</div>
<script src="hfclock.js"></script>

Vậy là xong, bạn hoàn toàn có thể tận hưởng thành quả của bạn như kết quả.

Tags: , ,