Inicia sesión




Animación SVG de Corazón con CSS

Animación SVG de Corazón 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 un corazón 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 nuestro corazón, para ello necesitaremos es crear nuestro SVG(<pah>):
<svg class="heart-loader" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90 90" version="1.1">
  <g class="heart-loader__group">
    <path class="heart-loader__square" stroke-width="1" fill="none" d="M0,30 0,90 60,90 60,30z"/>
    <path class="heart-loader__circle m--left" stroke-width="1" fill="none" d="M60,60 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>
    <path class="heart-loader__circle m--right" stroke-width="1" fill="none" d="M60,60 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>
    <path class="heart-loader__heartPath" stroke-width="2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0" />
  </g>
</svg>
Luego necesitaremos nuestros CSS
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.heart-loader {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin-top: -90px;
  width: 180px;
  height: 180px;
  overflow: visible;
}
.heart-loader__group {
  transform-origin: 0 90px;
  animation: group-anim 7s 1s infinite;
}
.heart-loader__square {
  stroke: #b8b8b8;
  stroke-dasharray: 240, 240;
  stroke-dashoffset: 240;
  animation: square-anim 7s 1s infinite;
}
.heart-loader__circle {
  stroke: #b8b8b8;
  stroke-dasharray: 188.522, 188.522;
  stroke-dashoffset: 188.522;
  transform-origin: 60px 30px;
}
.heart-loader__circle.m--left {
  animation: left-circle-anim 7s 1s infinite;
}
.heart-loader__circle.m--right {
  animation: right-circle-anim 7s 1s infinite;
}
.heart-loader__heartPath {
  stroke: #e21737;
  fill: transparent;
  stroke-dasharray: 308.522, 308.522;
  stroke-dashoffset: 308.522;
  animation: heart-anim 7s 1s infinite;
}
@keyframes square-anim {
  12% {
    stroke-dashoffset: 0;
  }
  43% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes left-circle-anim {
  12% {
    stroke-dashoffset: 188.522;
  }
  31% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  41% {
    stroke-dashoffset: 0;
    transform: translateY(-30px);
  }
  43% {
    stroke-dashoffset: 0;
    transform: translateY(-30px);
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    transform: translateY(-30px);
    opacity: 0;
  }
}
@keyframes right-circle-anim {
  12% {
    stroke-dashoffset: 188.522;
  }
  31% {
    stroke-dashoffset: 0;
    transform: translateX(0);
  }
  41% {
    stroke-dashoffset: 0;
    transform: translateX(30px);
  }
  43% {
    stroke-dashoffset: 0;
    transform: translateX(30px);
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    transform: translateX(30px);
    opacity: 0;
  }
}
@keyframes group-anim {
  43% {
    transform: rotate(0);
  }
  54% {
    transform: rotate(-45deg);
  }
  90% {
    transform: rotate(-45deg);
    opacity: 1;
  }
  97% {
    transform: rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes heart-anim {
  55% {
    stroke-dashoffset: 308.522;
    fill: transparent;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  87% {
    stroke-dashoffset: 0;
    fill: #e21737;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #e21737;
  }
}
Ver resultado de este Tutoriales en linea.

Te sugiero seguir leyendo...


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

Animación SVG de Corazón con CSS
Animación SVG de Corazón con CSS Animación SVG de Corazón con CSS...
Tutoriales en linea




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






Cómo restablecer Windows 10 o reinstalar automáticamente el sistema operativo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Microsoft Windows Software Ordenador Noticias Tutorial

Herramientas SEO para posicionamiento de nuestra web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Diseño Web Schema.org WebSite webmasters Marketing SEO Herramientas Noticias Tutorial

RESEÑA SOBRE GO4REX: BENEFÍCIESE DE INFINITAS OPORTUNIDADES

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Forex Post Patrocinados Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Curso de CSS avanzado

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

Curso Revit Online de Cero a Avanzado de Espacio BIM

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-24
  • Categorias: Cursos Noticias Tutorial