Home CSS Fancy Wrist Watch Using Css3 Transition and Transform Effect

Fancy Wrist Watch Using Css3 Transition and Transform Effect

781
0
SHARE
css3 watch

Wrist is a bi-weekly illustrative exercise to explore typography, colors, clock mechanics, and everything else that goes into watch design. Starting with one of my watches, I will be illustrating existing watches as well as exploring new watch designs. I sadly only own two watches, so I’ll quickly be moving to the latter.

This is the clock we’ll create using HTML, CSS and a little JavaScript. We’ll use CSS animations or transitions for any movement, and rely on JavaScript to set the initial time and adding basic CSS transforms.

My initial approach was to use three elements for each of the hands. I then went back and wrapped each in a container element. While the simpler HTML worked as far as the basic CSS animations, we’ll need containing elements when we want to position the hands and animate them also.

HTML:-

<div id='watch'>
  <!-- The bands of the watch -->
  <div id='tlg' class='grip'></div>
  <div id='trg' class='grip'></div>
  <div id='blg' class='grip'></div>
  <div id='brg' class='grip'></div>
  <div id='topBand' class='band'></div>
  <div id='botBand' class='band'></div>
  <!-- // bands -->
  
  <!-- The Face of the watch -->
  <div id='face'>
    <div id='glass'>
      <div id='twelve'>XII</div>
      <div id='three'>III</div>
      <div id='six'>VI</div>
      <div id='nine'>IX</div>
      
      <div id='center'>
      	<div id='name' style="left:40px;">Rahul</div>
        <div id='smallHand'></div>
        <div id='midHand'></div>
        <div id='bigHand'></div>
        <div id='dot'></div>
        <div id='desc'>Yaduvanshi</div>
      </div>
    </div>
  </div>
  <!-- // face -->
</div>

CSS:-

   
      body{ overflow: hidden; }


#watch {
  position: relative;
  margin: 50px;
}


.grip {
  position: absolute;
  border: 1px solid #777;
  width: 12px;
  height: 30px;
  background: #eee;
}


#tlg {
  top: -11px;
  left: 50px;
  border-radius: 8px 4px 0 0;
  border-left: none;
  box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 25, ../sass/s.scss */
#trg {
  top: -11px;
  left: 150px;
  border-radius: 4px 8px 0 0;
  border-right: none;
  box-shadow: inset 0 1px 0 #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 32, ../sass/s.scss */
#blg {
  top: 151px;
  left: 50px;
  border-radius: 0 0 4px 8px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* line 39, ../sass/s.scss */
#brg {
  top: 151px;
  left: 150px;
  border-radius: 0 0 8px 4px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* Material */
/* line 47, ../sass/s.scss */
.band {
  background: linear-gradient(27deg, #ae4601 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #ae4601 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #733206 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #733206 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #66381a 10px, transparent 10px),
linear-gradient(#66381a 25%, #301402 25%, #301402 50%, transparent 50%, transparent 75%, #3c1902 75%, #3c1902);
background-color: #512203;
background-size: 20px 20px;
  width: 87px;
  height: 600px;
  position: absolute;
}

/* line 54, ../sass/s.scss */
#topBand {
  top: -80px;
  left: 63px;
}

/* line 59, ../sass/s.scss */
#botBand {
  top: 140px;
  left: 63px;
}

/* Starting with the face of the watch */
/* line 65, ../sass/s.scss */
#face {
  background-color: #fefefe;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEFEFE', endColorstr='#FFFFFFFF');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -moz-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -o-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  margin: 20px;
  padding: 10px 0 0 10px;
  width: 160px;
  height: 160px;
  border: 1px solid #999;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #000;
  position: relative;
}
/* line 78, ../sass/s.scss */
#face:after {
  content: " ";
  display: block;
  width: 14px;
  height: 22px;
  position: absolute;
  right: -15px;
  top: 74px;
  z-index: -9;
  border-radius: 10px;
  border: 1px solid #888;
  background-color: #aaa;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF282828');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #505050), color-stop(14%, #c5c7c6), color-stop(22%, #505050), color-stop(28%, #e6e4e7), color-stop(35%, #8d8c91), color-stop(42%, #e9e9e9), color-stop(49%, #8c8c8c), color-stop(57%, #e2e2e4), color-stop(65%, #c8c8c8), color-stop(72%, #808080), color-stop(76%, #b4b4b4), color-stop(85%, #fdfdfd), color-stop(92%, #b4b4b4), color-stop(100%, #282828));
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -o-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
}

/* line 94, ../sass/s.scss */
#glass {
  box-shadow: inset 0 0 6px #000;
  background: #a6a39e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC8C5C0', endColorstr='#FFADA8A2');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c5c0), color-stop(100%, #ada8a2));
  background-image: -webkit-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -moz-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -o-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  width: 150px;
  height: 150px;
  border: 1px solid #999;
  border-radius: 80px;
  position: relative;
  /* Numbers */
}
/* line 107, ../sass/s.scss */
#glass div {
  position: absolute;
  font-size: 14px;
}
/* line 111, ../sass/s.scss */
#glass div:nth-child(2n) {
  transform: rotate(-90deg);
}
/* line 115, ../sass/s.scss */
#glass #twelve {
  top: 3px;
  left: 65px;
}
/* line 116, ../sass/s.scss */
#glass #three {
  top: 66px;
  left: 135px;
}
/* line 117, ../sass/s.scss */
#glass #six {
  top: 135px;
  left: 67px;
}
/* line 118, ../sass/s.scss */
#glass #nine {
  top: 66px;
  left: 5px;
}
/* line 121, ../sass/s.scss */
#glass #center {
  background: #e1ddd2;
  box-shadow: inset 0 1px 1px #777777, inset 0 -1px 1px #777777;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: 20px;
  left: 20px;
}
/* line 130, ../sass/s.scss */
#glass #center div {
  top: 55px;
  left: 55px;
}
/* line 134, ../sass/s.scss */
#glass #center #name, #glass #center #desc {
  top: 10px;
  left: 32px;
  font-variant: small-caps;
  font-size: 8px;
}
/* line 140, ../sass/s.scss */
#glass #center #desc {
  top: 70px;
  margin-left: 0px;
  transform: none;
}
/* line 146, ../sass/s.scss */
#glass #center #dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444e5e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF444E5E', endColorstr='#FF4F4E5E');
  left: 51px;
  top: 55px;
}
/* line 156, ../sass/s.scss */
#glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand {
  background: #1c2252;
  width: 45px;
  height: 2px;
  border: 1px solid #4f4e5e;
  box-shadow: 0 0 1px #b5afaf;
  /* enables antialiasing */
  border-radius: 80%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0% 50%;
  transform: rotate(-45deg);
  -webkit-animation: hours 43200s infinite linear;
  -moz-animation: hours 43200s infinite linear;
  -ms-animation: hours 43200s infinite linear;
  -o-animation: hours 43200s infinite linear;
  animation: hours 43200s infinite linear;
}
/* line 169, ../sass/s.scss */
#glass #center #bigHand {
  width: 65px;
  height: 0;
  border-bottom: none;
  -webkit-animation: seconds 60s infinite linear;
  -moz-animation: seconds 60s infinite linear;
  -ms-animation: seconds 60s infinite linear;
  -o-animation: seconds 60s infinite linear;
  animation: seconds 60s infinite linear;
}
/* line 175, ../sass/s.scss */
#glass #center #midHand {
  width: 65px;
  height: 1px;
  -webkit-animation: minutes 3600s infinite linear;
  -moz-animation:  minutes 3600s infinite linear;
  -ms-animation:  minutes 3600s infinite linear;
  -o-animation: minutes 3600s infinite linear;
  animation: minutes 3600s infinite linear;
}

/* keyframes added with JS so that watch starts at local time */
@-webkit-keyframes seconds {0%{-webkit-transform: rotate(120deg);}to{-webkit-transform: rotate(480deg);}}
@-webkit-keyframes minutes {0%{-webkit-transform: rotate(178deg);}to{-webkit-transform: rotate(538deg);}}
@-webkit-keyframes hours {0%{-webkit-transform: rotate(130deg);}to{-webkit-transform: rotate(490deg);}}

@-moz-keyframes seconds {0%{-moz-transform: rotate(120deg);}to{-moz-transform: rotate(480deg);}}
@-moz-keyframes minutes {0%{-moz-transform: rotate(178deg);}to{-moz-transform: rotate(538deg);}}
@-moz-keyframes hours {0%{-moz-transform: rotate(130deg);}to{-moz-transform: rotate(490deg);}}

@-o-keyframes seconds {0%{-o-transform: rotate(120deg);}to{-o-transform: rotate(480deg);}}
@-o-keyframes minutes {0%{-o-transform: rotate(178deg);}to{-o-transform: rotate(538deg);}}
@-o-keyframes hours {0%{-o-transform: rotate(130deg);}to{-o-transform: rotate(490deg);}}

@-ms-keyframes seconds {0%{-ms-transform: rotate(120deg);}to{-ms-transform: rotate(480deg);}}
@-ms-keyframes minutes {0%{-ms-transform: rotate(178deg);}to{-ms-transform: rotate(538deg);}}
@-ms-keyframes hours {0%{-ms-transform: rotate(130deg);}to{-ms-transform: rotate(490deg);}}

@keyframes seconds {0%{transform: rotate(120deg);}to{transform: rotate(480deg);}}
@keyframes minutes {0%{transform: rotate(178deg);}to{transform: rotate(538deg);}}
@keyframes hours {0%{transform: rotate(130deg);}to{transform: rotate(490deg);}}

    </style>

JavaScript to set the initial time and adding basic CSS transforms

var d = new Date(),
		hr  = d.getHours()%12,
		min = d.getMinutes(),
		sec = d.getSeconds(),
    
		// Base Values (-90 since that's where 12 starts)
		baseDegSEC = -90 + Math.round(sec * 6),
    baseDegMIN = -90 + Math.round(min*6 + (6 / (60/sec))),
    baseDegHR  = -90 + Math.round(hr*30 + (30 / ( (60/min)+(60/sec) )) ),
    
		// End Values
		endDegSEC = baseDegSEC + 360,
    endDegMIN = baseDegMIN + 360,
    endDegHR  = baseDegHR  + 360,
    
    keyframes = "",
    VENDORS = [ '-webkit-', '-moz-', '-o-', '-ms-', '' ];


for( var i = 0, len = VENDORS.length; i < len; i++ ) {
  
  keyframes += "@"+VENDORS[i]+"keyframes seconds {"+
    "0%{"+VENDORS[i]+"transform: rotate("+baseDegSEC+"deg);}"+
    "to{"+VENDORS[i]+"transform: rotate("+endDegSEC+"deg);}}"+
    
    "@"+VENDORS[i]+"keyframes minutes {"+
    "0%{"+VENDORS[i]+"transform: rotate("+baseDegMIN+"deg);}"+
    "to{"+VENDORS[i]+"transform: rotate("+endDegMIN+"deg);}}"+
    
    "@"+VENDORS[i]+"keyframes hours {"+
    "0%{"+VENDORS[i]+"transform: rotate("+baseDegHR+"deg);}"+
    "to{"+VENDORS[i]+"transform: rotate("+endDegHR+"deg);}}";
}


// Add the Keyframes in a <style> tag in the <head>
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';

var rules = document.createTextNode(keyframes);
cssAnimation.appendChild(rules);

document.getElementsByTagName("head")[0].appendChild(cssAnimation);


// Reloading the stylesheets to fix Chrome bug?
var links = document.getElementsByTagName("link"); 

for (var i = 0; i < links.length; i++) {
  var link = links[i]; 
  if (link.rel === "stylesheet") {
    link.href += "?"; 
  }
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here