Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Moto360 watch face animation in CSS3 and HTML5
<div class="watch">
<div class="outer-circle">
</div>
<div class="inner-circle">
</div>
<div class="display">
</div>
<!-- Here's the notification displayed at hover -->
<div class="notification">
<span class="notif-icon">
</span>
<p class="notif-text-1">
John just favorited
</p>
<p class="notif-text-2">
your tweet.
</p>
<p class="notif-text-small">
2 seconds ago
</p>
</div>
<!-- The Moto360 isn't perfect rounded -->
<div class="bezel">
</div>
<div class="strap">
</div>
<div class="clock">
<div class="hour">&#149;</div>
<div class="minute">&#149;</div>
</div>
<div class="internal-nob">
</div>
<div class="external-nob">
</div>
<div class="info">
<p>Hover for notification.</p>
</div>
</div>
/* Installing the Roboto font */
@import url(http://fonts.googleapis.com/css?family=Roboto);
html {
background: #0C131C;
}
.watch {
width: 300px;
margin: 0 auto;
margin-top: 130px;
}
.outer-circle {
margin: 0 auto;
width: 200px;
height: 200px;
background: #666666;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
position: absolute;
}
.inner-circle {
margin: 0 auto;
width: 190px;
height: 190px;
background: black;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 150px;
position: absolute;
margin-left: 5px;
margin-top: 5px;
}
.display {
margin: 0 auto;
width: 170px;
height: 170px;
background: #18222E;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 150px;
position: absolute;
margin-left: 15px;
margin-top: 15px;
}
.bezel {
height:20px;
width:115px;
border-radius: 0 0 125px 120px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background:black;
position: absolute;
margin-top: 165px;
margin-left: 43px;
z-index: 3001;
}
.notification {
height:80px;
width:170px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background: rgba(255,255,255, .8);
position: absolute;
margin-top: 102px;
margin-left: 15px;
}
.notif-text-1 {
margin-top: 8px;
margin-left: 25px;
margin-bottom: -8px;
font-size: 14px;
font-family: Roboto, sans-serif;
}
.notif-text-2 {
margin-left: 25px;
margin-bottom: -5px;
margin-top: 6px;
font-size: 14px;
font-family: Roboto, sans-serif;
}
.notif-text-small {
margin-top: 4px;
margin-left: 25px;
margin-bottom: -5px;
font-size: 10px;
color: #727272;
font-family: Roboto, sans-serif;
}
.notif-icon {
width: 25px;
height: 25px;
display: block;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 150px;
position: absolute;
margin-left: 135px;
margin-top: -15px;
background-image: url('https://cdn3.iconfinder.com/data/icons/leaf/256/twitter.png');
background-size: 95%;
}
.notification {
opacity: 0;
background: rgba(255,255,255, .8);
-webkit-transition: opacity .5s;
transition: opacity .5s;
-moz-transiton: opacity .5s;
}
/* Displaying the notification at hover */
.notification:hover{
opacity: 1;
z-index: 3000;
}
.strap {
width: 100px;
height: 300px;
background: #4B4B4B;
position: absolute;
margin-left: 50px;
margin-top: -50px;
z-index: -100;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
/* The animation properties for hour and minute */
.hour {
display: block;
position: absolute;
width: 80px;
height: 80px;
margin-left: 58px;
margin-top: 60px;
font-size: 64px;
padding: 0px;
color: #FF4081;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
border: 2px solid #26384C;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
.minute {
display: block;
position: absolute;
width: 110px;
height: 110px;
margin-left: 43px;
margin-top: 44px;
font-size: 41px;
padding: 1px;
color: #40DBE5;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
border: 2px solid #26384C;
-webkit-animation: spin-right 3s linear infinite;
-moz-animation: spin-right 3s linear infinite;
-ms-animation: spin-right 3s linear infinite;
-o-animation: spin-right 3s linear infinite;
animation: spin-right 3s linear infinite;
}
/* The circle animation */
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.internal-nob {
width: 25px;
height: 35px;
background: #4B4B4B;
position: absolute;
margin-left: 178px;
margin-top: 85px;
z-index: -100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.external-nob {
width: 25px;
height: 25px;
background: #666666;
position: absolute;
margin-left: 183px;
margin-top: 90px;
z-index: -1000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.info {
position: absolute;
width: 200px;
text-align: center;
margin-top: 300px;
font-size: 12px;
color: #fff;
font-family: Roboto, sans-serif;
opacity: .2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.