Time Login

bysemicon -
0

 


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Time Login</title>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Radley|Roboto:400,500,700);
*, *:after, *:before {
  box-sizing: border-box;
}

html {
  background: #009A4C;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
}

.clock-container {
  position: relative;
  max-width: 500px;
  margin: 50px auto 0;
}
.clock-container:hover .clock, .clock-container.open .clock {
  transform: rotateX(-180deg);
  background: #00a250;
}
.clock-container:hover .triger, .clock-container.open .triger {
  transform: translateY(20px);
}
.clock-container:hover .btn, .clock-container:hover .form-group, .clock-container.open .btn, .clock-container.open .form-group {
  transform: translateX(0%);
  opacity: 1;
}

.triger {
  border: 2px solid #fff;
  color: #009A4C;
  font-size: 16px;
  background: #fff;
  margin: 50px auto -8px;
  display: block;
  text-align: center;
  width: 130px;
  padding: 10px 15px;
  border-radius: 40px 40px 0 0;
  transition: 0.2s;
  transform: translateY(5px);
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.triger:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 100%;
  border: 3px solid #fff;
}
.triger:focus, .triger:active {
  outline: none;
}

.clock, .login-form {
  position: relative;
  width: 400px;
  height: 400px;
  background: #009A4C;
  border-radius: 100%;
  margin: auto;
  border: 2px solid #fff;
  z-index: 200;
  transition: ease-in 0.5s;
  transform-origin: 50% 100%;
}
.clock:after, .clock:before, .login-form:after, .login-form:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
}
.clock:before, .login-form:before {
  width: 100%;
  height: 100%;
  background: #009A4C;
}

.minute, .hour, .second {
  position: absolute;
  width: 3px;
  background: #fff;
  height: 120px;
  transform-origin: 0 100%;
  transform: rotate(0deg);
  left: 0;
  right: 0;
  margin: auto;
  bottom: 50%;
}
.minute:after, .hour:after, .second:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin: auto;
  left: -4px;
  top: 0;
  background: #fff;
}

.hour {
  height: 75px;
}

.second {
  width: 2px;
  height: 140px;
}
.second:after {
  left: -5px;
}

.login-form {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  padding: 150px 50px 0;
  background: #009047;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
  z-index: 100;
}
.login-form .btn, .login-form .form-group {
  -moz-transition: 0.3s 0.4s;
  -o-transition: 0.3s 0.4s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.4s;
  transition: 0.3s 0.4s;
  transform: translateX(10%);
  opacity: 0;
}
.login-form:after, .login-form:before {
  display: none;
}

.clock-numbers {
  display: block;
  font-size: 26px;
  margin: auto;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  list-style-type: none;
  font-family: 'Radley', serif;
}
.clock-numbers li {
  position: absolute;
  text-align: center;
  color: #fff;
}
.clock-numbers li:nth-child(1) {
  left: 50%;
  top: 10px;
}
.clock-numbers li:nth-child(2) {
  right: 10px;
  top: 50%;
}
.clock-numbers li:nth-child(3) {
  bottom: 10px;
  left: 50%;
}
.clock-numbers li:nth-child(4) {
  left: 10px;
  top: 50%;
}

.form-group {
  display: block;
  position: relative;
  min-height: 50px;
  margin-bottom: 15px;
}
.form-group .form-label {
  color: #fff;
  position: absolute;
  left: 5px;
  width: 100%;
  top: 7px;
  z-index: 1;
  transition: 0.3s;
}
.form-group .form-control {
  background: none;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  width: 100%;
  padding: 7px 5px;
  position: relative;
  z-index: 5;
}
.form-group .form-control:focus {
  border-bottom-color: #fff;
  outline: none;
  outline: none;
}
.form-group .form-control:focus + .form-label {
  color: #fff;
  transform: translateY(-25px);
  font-size: 12px;
}
.form-group .form-control:valid {
  outline: none;
}
.form-group .form-control:valid + .form-label {
  transform: translateY(-25px);
  font-size: 12px;
}

.btn {
  background: #fff;
  border: 1px solid #d5d5d5;
  font-size: 18px;
  padding: 8px 15px;
  color: #009A4C;
  font-weight: 200;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  width: 150px;
  margin: auto;
  display: block;
  cursor: pointer;
}

.wheel-box {
  position: absolute;
  z-index: 50;
  display: block;
  top: 50%;
  right: 50%;
  width: 360px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.wheel-box li {
  position: absolute;
  background: url("https://i.imgur.com/8GFg4yR.png") no-repeat;
  -webkit-animation: rotate 150s linear 0s infinite;
  animation: rotate 150s linear 0s infinite;
}
.wheel-box li:nth-child(1) {
  -webkit-animation: rotateR 120s linear 0s infinite;
  animation: rotateR 120s linear 0s infinite;
  left: 50px;
  top: 0;
  background-position: -5px 0;
  width: 253px;
  height: 253px;
  z-index: 8;
}
.wheel-box li:nth-child(2) {
  background-position: -334px -50px;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  width: 111px;
  height: 111px;
  left: 175px;
  top: 115px;
}
.wheel-box li:nth-child(3) {
  background-position: 0 -388px;
  -webkit-animation: rotateR 100s linear 0s infinite;
  animation: rotateR 100s linear 0s infinite;
  width: 187px;
  height: 187px;
  left: 50px;
  top: 195px;
}
.wheel-box li:nth-child(4) {
  background-position: -220px -318px;
  height: 285px;
  left: 232px;
  top: 133px;
  width: 285px;
}
@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateR {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotateR {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
</style>


</head>

<body translate="no" >
  <div class="clock-container"><span class="triger">LOG</span>
  <div class="clock">
    <div class="second"></div>
    <div class="minute"></div>
    <div class="hour"></div>
    <ul class="clock-numbers">
      <li>XII</li>
      <li>III</li>
      <li>VI</li>
      <li>IX</li>
    </ul>
  </div>
  <form class="login-form">
    <div class="form-group">
      <input class="form-control" required=""/>
      <label class="form-label">User Name</label>
    </div>
    <div class="form-group">
      <input class="form-control" type="password" required=""/>
      <label class="form-label">Password</label>
    </div>
    <button class="btn">IN</button>
  </form>
  <ul class="wheel-box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
(function () {

  function getTime() {

    var date = new Date(),
    seconds = date.getSeconds(),
    minutes = date.getMinutes(),
    hours = date.getHours(),

    degSeconds = seconds * 360 / 60,
    degMinutes = (minutes + seconds / 60) * 360 / 60,
    degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

    $('.second').css('transform', 'rotate(' + degSeconds + 'deg)');
    $('.minute').css('transform', 'rotate(' + degMinutes + 'deg)');
    $('.hour').css('transform', 'rotate(' + degHours + 'deg)');
  }
  setInterval(getTime, 1000);
  getTime();
})();


// form Checking
$('.form-control').keyup(function () {
  if ($(this).val().length > 0) {
    $('.clock-container').addClass('open');
  } else

  {
    $('.clock-container').removeClass('open');
  }
});
//# sourceURL=pen.js
    </script>

</body>
</html>
ที่มา : Vineeth.TR on CodePen

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า