Wifeo Creative Code

<<< back to homepage for others creatives tricks

PURE CSS3 NEXUS ANIMATION

09:07

VEN. 12 SEPTEMBRE

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="uKEsl" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/uKEsl'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/29-pure-css3-nexus-animation.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.nexus5 {
  background-color: #111111;
  height: 550px;
  width: 280px;
  border: 2px solid #000000;
  border-top-left-radius: 200px 25px;
  border-top-right-radius: 200px 25px;
  border-bottom-left-radius: 200px 25px;
  border-bottom-right-radius: 200px 25px;
  box-shadow:1px 1px 8px #333333;
}
.camera {
  position: absolute;
  background-color: #212122;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  margin-top: 25px;
  margin-left: 35px;
}
.speaker {
  position: absolute;
  background-color: #171717;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  margin-top: 22px;
  margin-left: 130px;
}
.lock {
  background-color: #080808;
  position: absolute;
  height: 35px;
  width: 3px;
  margin-left: 280px;
  margin-top: 75px;
}

.volume {
  background-color: #080808;
  position: absolute;
  height: 75px;
  width: 3px;
  margin-top: 100px;
  margin-left: -3px;
}
.screen_off {
  background-color: #333333;
  position: absolute;
  z-index: 2;
  height: 450px;
  width: 260px;
  margin-left: 10px;
  margin-top: 48px;
  background-size: 260px 450px;
}
.clock
{
  text-align: center;
  font-family: 'Roboto';
  font-weight: 100;
  color: #ffffff;
  padding-top: 30px;
  font-size: 75px;
}
.date
{
  text-align: center;
  font-family: 'Roboto';
  font-weight: 300;
  color: #ffffff;
  font-size: 12px;
}
.swipe_lock
{
  position: absolute;
  border: 2px solid #ffffff;
  height: 50px;
  width:50px;
  border-radius: 50%;
  bottom: 40px;
  margin-left: 50%;
  left:-25px;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: swipe;
  -webkit-transform-origin: 50% 50%;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 3;
  -moz-animation-fill-mode: both;
  -moz-animation-name: swipe;
  -moz-transform-origin: 50% 50%;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 3;
  -ms-animation-fill-mode: both;
  -ms-animation-name: swipe;
  -ms-transform-origin: 50% 50%;
  animation-duration: 1s;
  animation-iteration-count: 3;
  animation-fill-mode: both;
  animation-name: swipe;
  transform-origin: 50% 50%;
}
@-webkit-keyframes swipe 
{
  0% {-webkit-transform: scale(1); opacity: 1;}
  100% {-webkit-transform: scale(1.4); opacity: 0;}
}
@-moz-keyframes swipe 
{
  0% {-moz-transform: scale(1); opacity: 1;}
  100% {-moz-transform: scale(1.4); opacity: 0;}
}
@-ms-keyframes swipe 
{
  0% {-ms-transform: scale(1); opacity: 1;}
  100% {-ms-transform: scale(1.4); opacity: 0;}
}
@keyframes swipe 
{
  0% {transform: scale(1); opacity: 1;}
  100% {transform: scale(1.4); opacity: 0;}
}
.screen {
  background-color:#75a9c6;
  overflow: hidden;
  position: absolute;
  top:0px;
  z-index: 3;
  height: 450px;
  width: 260px;
  margin-left: 10px;
  margin-top: 50px;
  background-size: 260px 450px;
  -webkit-animation-delay: 3s;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: close;
  -moz-animation-delay: 3s;
  -moz-animation-duration: 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: both;
  -moz-animation-name: close;
  -ms-animation-delay: 3s;
  -ms-animation-duration: 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: both;
  -ms-animation-name: close;
  animation-delay: 3s;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-name: close;
}
@-webkit-keyframes close 
{
  0% {height: 450px;top:0px;}
  100% {height: 0px;top:225px; background: #ffffff; box-shadow:1px 1px 8px #ffffff;}
}
@-moz-keyframes close 
{
  0% {height: 450px;top:0px;}
  100% {height: 0px;top:225px; background: #ffffff; box-shadow:1px 1px 8px #ffffff;}
}
@-ms-keyframes close 
{
  0% {height: 450px;top:0px;}
  100% {height: 0px;top:225px; background: #ffffff; box-shadow:1px 1px 8px #ffffff;}
}
@keyframes close 
{
  0% {height: 450px;top:0px;}
  100% {height: 0px;top:225px; background: #ffffff; box-shadow:1px 1px 8px #ffffff;}
}

HTML CODE :

<div align="center" style="position:relative;">
  <div class="nexus5">
    <div class="camera"></div>
    <div class="speaker"></div>
    <div class="screen_off"></div>
    <div class="screen">
      <div class="clock">09:07</div>
      <div class="date">VEN. 12 SEPTEMBRE</div>
      <div class="swipe_lock"></div>
    </div>
    <div class="lock"></div>
    <div class="volume"></div>
  </div>
</div>