HTML + CSS3 plus a little clock made by JS

Original: http://margox.me/css3clock.html

The first time I posted an article, I was more excited.
I have been immersed in Dribbble and other designer websites for a long time, and I am very excited to see those beautiful design works, but helpless PS is not proficient, AI has long forgotten, but only a little research on the front end, I accidentally saw a few A clock with a clean design, I think it should not be difficult to implement with CSS, so it took a bit to figure out the clock.

Renderings

image description

Technical point

  • The texture of the box-shadow dial depends on it
  • nth-child (x) is used to position the dial scale
  • transform-origin This is used to locate the center point of the rotation of the three hands
  • keyframes needle animation effect

Process

First design the DOM structure, the code is as follows:

<div class="clock-wrapper">
    <div class="clock-base">
        <div class="click-indicator">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="clock-hour"></div>
        <div class="clock-minute"></div>
        <div class="clock-second"></div>
        <div class="clock-center"></div>
    </div>
</div>

The structure is very simple, and the use of each element can be seen from the style name. The empty div in the middle is naturally the dial scale.
Next is the CSS code

html,body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(#e7e7e7,#d7d7d7);
}
/*时钟容器*/
.clock-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 100px;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    padding: 5px;
    background-image: linear-gradient(#f7f7f7,#e0e0e0);
    border-radius: 50%;
    box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);

}
/*表盘*/
.clock-base{
    width: 250px;
    height: 250px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 5px #eee;
}
/*表盘刻度容器*/
.click-indicator{
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 15px;
    width: 230px;
    height: 230px;
}
/*表盘刻度*/
.click-indicator div{
    position: absolute;
    width: 2px;
    height: 4px;
    margin: 113px 114px;
    background-color: #ddd;
}
/*分别设置各个刻度的位置和角度*/
.click-indicator div:nth-child(1) {
    transform: rotate(30deg) translateY(-113px);
}
.click-indicator div:nth-child(2) {
    transform: rotate(60deg) translateY(-113px);
}
.click-indicator div:nth-child(3) {
    transform: rotate(90deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(4) {
    transform: rotate(120deg) translateY(-113px);
}
.click-indicator div:nth-child(5) {
    transform: rotate(150deg) translateY(-113px);
}
.click-indicator div:nth-child(6) {
    transform: rotate(180deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(7) {
    transform: rotate(210deg) translateY(-113px);
}
.click-indicator div:nth-child(8) {
    transform: rotate(240deg) translateY(-113px);
}
.click-indicator div:nth-child(9) {
    transform: rotate(270deg) translateY(-113px);
    background-color: #aaa;
}
.click-indicator div:nth-child(10) {
    transform: rotate(300deg) translateY(-113px);
}
.click-indicator div:nth-child(11) {
    transform: rotate(330deg) translateY(-113px);
}
.click-indicator div:nth-child(12) {
    transform: rotate(360deg) translateY(-113px);
    background-color: #c00;
}
/*时针*/
.clock-hour{
    position: absolute;
    z-index: 2;
    top: 80px;
    left: 128px;
    width: 4px;
    height: 65px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 50px;
    transition: .5s;
    -webkit-animation: rotate-hour 43200s linear infinite;
}
/*分针*/
.clock-minute{
    position: absolute;
    z-index: 3;
    top: 60px;
    left: 128px;
    width: 4px;
    height: 85px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 70px;
    transition: .5s;
    -webkit-animation: rotate-minute 3600s linear infinite;
}
/*秒针*/
.clock-second{
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 129px;
    width: 2px;
    height: 130px;
    background-color: #a00;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 1px 110px;
    transition: .5s;
    -webkit-animation: rotate-second 60s linear infinite;
}
.clock-second:after{
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    bottom: 14px;
    width: 8px;
    height: 8px;
    background-color: #a00;
    border: solid 2px #a00;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*表盘中央的原型区域*/
.clock-center{
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    top: 55px;
    left: 55px;
    background-image: linear-gradient(#e3e3e3,#f7f7f7);
    border-radius: 50%;
    box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 65px;
    background-color: #ddd;
    border-radius: 50%;
}

These are the style files, but in this case, the three pointers are at 12 o'clock, and then the pointer needs to be moved.
In fact, simply set the animation rules directly in the css: the hour hand 43200 seconds rotates 360 degrees, the minute hand second hand and so on.
However, obsessive-compulsive disorder said that this is not possible, and the clock that can't even indicate the correct time is definitely a cottage product, so here we need to find a good CSS JavaScript brother to borrow:

(function(){

    //generate clock animations
    var now       = new Date(),
        hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
        minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
        secondDeg = now.getSeconds() / 60 * 360,
        stylesDeg = [
            "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
            "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
            "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
        ].join("");

    document.getElementById("clock-animations").innerHTML = stylesDeg;

})();

Oh, do n’t forget to put something in the head tag:

<style id="clock-animations"></style>

Otherwise, the style code generated by JS has no place to live.

Ok, I have put the above code on jsbin:
http://output.jsbin.com/xeraxe

--

That's it, give an ugly, pat everyone ~ :)

Guess you like

Origin www.cnblogs.com/baimeishaoxia/p/12671380.html