Inicia sesión




Cuenta atrás SVG con CSS

Cuenta atrás SVG con CSSEl estándar SVG lleva con nosotros desde el año 1999, y aunque ya han pasado muchas primaveras desde su lanzamiento, actualmente sigue siendo uno de los formatos más utilizados debido a las funciones que nos aportan. Son muchas sus ventajas (aunque también hay algunas desventajas) respecto a trabajar con imágenes de mapa de bits, pero la que más nos interesa hoy es la posibilidad de poder crear animaciones para aplicar en nuestros proyectos web. 

La animación SVG es una excelente alternativa al uso de GIF animados en la web, pero no siempre es fácil. En este tutorial vamos a ver y a explicar cómo puedes animar fácilmente una cuenta atrás en SVG.

Entendiendo la propiedad <path>

Para entender el funcionamiento del elemento <path> de SVG, nos basta con mirar la definición que nos ofrece la MDN:
“El elemento <path> es un elemento SVG genérico con el que se puede definir una forma mediante un conjunto de puntos. Todas las formas básicas de SVG se pueden crear con un elemento path”.
Ahora vamos a crear nuestra cuenta atrás, para ello necesitaremos es crear nuestro SVG(<pah>):
<div class="demo">
  <div class="demo__colored-blocks">
    <div class="demo__colored-blocks-rotater">
      <div class="demo__colored-block"></div>
      <div class="demo__colored-block"></div>
      <div class="demo__colored-block"></div>
    </div>
    <div class="demo__colored-blocks-inner"></div>
    <div class="demo__text">Preparado</div>
  </div>
  <div class="demo__inner">
    <svg class="demo__numbers" viewBox="0 0 100 100">
      <defs>
        <path class="demo__num-path-1" d="M40,28 55,22 55,78"/>
        <path class="demo__num-join-1-2" d="M55,78 55,83 a17,17 0 1,0 34,0 a20,10 0 0,0 -20,-10"/>
        <path class="demo__num-path-2" d="M69,73 l-35,0 l30,-30 a16,16 0 0,0 -22.6,-22.6 l-7,7"/>
        <path class="demo__num-join-2-3" d="M28,69 Q25,44 34.4,27.4"/>
        <path class="demo__num-path-3" d="M30,20 60,20 40,50 a18,15 0 1,1 -12,19"/>
      </defs>
      <path class="demo__numbers-path" 
            d="M-10,20 60,20 40,50 a18,15 0 1,1 -12,19 
               Q25,44 34.4,27.4
               l7,-7 a16,16 0 0,1 22.6,22.6 l-30,30 l35,0 L69,73 
               a20,10 0 0,1 20,10 a17,17 0 0,1 -34,0 L55,83 
               l0,-61 L40,28" />
    </svg>
  </div>
</div>
Luego necesitaremos nuestros CSS
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #32386d;
  font-family: Helvetica, Arial, sans-serif;
}
.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 140px;
  margin-top: -70px;
  padding: 10px;
  border-radius: 20px;
  transform: translateX(-50%);
}
.demo__colored-blocks {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 0;
  width: 800px;
  height: 100%;
  margin-left: -400px;
  padding: 10px;
  border-radius: 20px;
  perspective: 1000px;
  animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite;
}
.demo__colored-blocks-rotater {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  animation: rotation 1.3s linear infinite;
}
.demo__colored-blocks-inner {
  overflow: hidden;
  position: relative;
  height: 100%;
  background: #32386d;
  border-radius: inherit;
}
.demo__colored-block {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  height: 300%;
  transform-origin: 0 0;
}
.demo__colored-block:nth-child(1) {
  transform: rotate(0deg) skewX(-30deg);
  background-color: #fd3359;
}
.demo__colored-block:nth-child(2) {
  transform: rotate(120deg) skewX(-30deg);
  background-color: #f4d302;
}
.demo__colored-block:nth-child(3) {
  transform: rotate(240deg) skewX(-30deg);
  background-color: #21bdff;
}
.demo__inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.demo__numbers {
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}
.demo__numbers-path {
  fill: none;
  stroke-width: 10px;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0, 518.05507;
  stroke-dashoffset: 0;
  animation: numAnim 4s ease-in-out infinite;
  opacity: 0;
}
.demo__text {
  position: absolute;
  left: 50%;
  top: 0;
  width: 800px;
  height: 100%;
  margin-left: -400px;
  text-align: center;
  line-height: 140px;
  font-size: 100px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 15px;
  transform: translateX(10px);
  animation: hideText 4s infinite;
}
@keyframes contAnim {
  15%, 100% {
    margin-left: -400px;
    width: 800px;
  }
  25%, 90% {
    margin-left: -70px;
    width: 140px;
  }
}
@keyframes numAnim {
  15% {
    stroke-dasharray: 0, 518.05507;
    stroke-dashoffset: 0;
    opacity: 0;
  }
  25%, 41% {
    opacity: 1;
    stroke-dasharray: 144.42566, 518.05507;
    stroke-dashoffset: -40;
  }
  53%, 66% {
    stroke-dasharray: 136.02162, 518.05507;
    stroke-dashoffset: -227.2387;
  }
  76% {
    stroke-dasharray: 113.47512, 518.05507;
    stroke-dashoffset: -445.89957;
  }
  88%, 100% {
    stroke-dasharray: 72.15549, 518.05507;
    stroke-dashoffset: -445.89957;
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
@keyframes demoAnim {
  15% {
    border-radius: 20px;
    transform: rotate(0);
  }
  30%, 43% {
    border-radius: 50%;
    transform: rotate(360deg);
  }
  52%, 65% {
    border-radius: 0;
    transform: rotate(720deg);
  }
  78%, 90% {
    border-radius: 50%;
    transform: rotate(1080deg);
  }
  100% {
    border-radius: 20px;
    transform: rotate(1440deg);
  }
}
@keyframes hideText {
  15%, 100% {
    opacity: 1;
  }
  20%, 96% {
    opacity: 0;
  }
}
Ver resultado de este Tutoriales en linea.

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-28
  • Categorias: Diseño Web CSS3 Html WebSite webmasters Noticias Tutorial

Cuenta atrás SVG con CSS
Cuenta atrás SVG con CSS Cuenta atrás SVG con CSS...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Go4Rex El Salvador es la mejor opción para una experiencia comercial perfecta

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-08
  • Categorias: criptomoneda Forex Noticias Tutorial

Que es marketing de eventos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-07
  • Categorias: Post Patrocinados Coobis Marketing Noticias Tutorial

Cómo analizar el rendimiento del sitio web con Lighthouse

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-05
  • Categorias: Diseño Web WebSite webmasters Optimizacion Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial