Lập trình web

Hướng dẫn tạo đồng hồ Analog bằng CSS3

Chia sẻ nhanh

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.




Tải các file ảnh liên quan: Download HERE

Đầ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 class="start"><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ả.



Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?