A Pen by Alecsandru Grigoriu on CodePen.
Created
December 29, 2014 22:45
-
-
Save Alecsandru/f6d4866524d33241c244 to your computer and use it in GitHub Desktop.
Moto360 watch face animation in CSS3 and HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">•</div> | |
<div class="minute">•</div> | |
</div> | |
<div class="internal-nob"> | |
</div> | |
<div class="external-nob"> | |
</div> | |
<div class="info"> | |
<p>Hover for notification.</p> | |
</div> | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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