A Pen by Agustin Ramos.

index.html

<div class="container">
  <div class="text">Intento de Reloj CSS3 #1</div>
  <div class="text">Cuento los minutos para estar a tu lado</div>
  <div class="circle">
    <div class="second"></div>
    <div class="min"></div>
  </div>
</div>

Intento-de-Reloj-#1.markdown

Intento de Reloj #1

probando las animaciones css3, intentando hacer un reloj ...

A Pen by Agustin Ramos on CodePen.

License.

style.css

body {
  background: #3498db;
  font-family:helvetica;
}

.text { color : white;
font-size:25px;
}
.circle {
  width:350px;
  height:350px;
  border:3px black solid;
  border-radius:50%;
  position:absolute;
  top:100px;
  left:100px;
}

.second {
  width:350px;
  height:3px;
  background-image: -webkit-linear-gradient(left, transparent, transparent 50%, #000 50%, #000);

  position:absolute;
  top:175px;
  -webkit-animation: spinsec 6s linear infinite;
}

.min {
  width:350px;
  height:3px;
  background-image: -webkit-linear-gradient(left, transparent, transparent 50%, #000 50%, #000);

  position:absolute;
  top:175px;
  -webkit-animation: spinsec 360s linear infinite;
}

@-webkit-keyframes spinsec {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes spinmin {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}