Transmisión de datos de animación de corazón HTML

918 byby.createsite

Abrir en el editor Video Publica tu código

Transmisión de datos de animación de corazón HTML

Recomendado

19 July 2023

Carrusel de tarjetas con CSS

5 September 2024

Generador de contraseñas (NEGRO)

22 August 2025

Clínica de Cardiología: Servicios de salud cardíaca y atención cardíaca

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #14171d;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 50%;
      max-width: 90%;
      width: 100%;
      overflow-y: auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .function       { color: #A6E22E; }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

/* Tuesday's Algorithm of Affection - CSS */

.heart {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto;
      transform: rotate(45deg);
      animation: heartBeat 2s infinite alternate;
    }

/* Formato de um coração - Repre senta a lógica do algoritmo ** */
    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      background: radial-gradient(
        circle at top left,
        #E6DB74 0%,
        #AE81FF 50%,
        #66D9EF 100%
      ); /* Variabilidade de cores */
      border-radius: 50%;
    }

.heart::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.heart::after {
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      /* Animação de pulsação - Manifestação de impulsos digitais */
      animation: pulse 1s ease-in-out infinite;
    }

@keyframes heartBeat {
      0% {
        transform: rotate(45deg);
        scale: 1;
      }
      100% {
        transform: rotate(45deg) scale(0.9);
      }
    }

@keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

/* Construção de um fluxo de dados, representando a conexão ** */
    .data-stream {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background: linear-gradient(
        to right,
        #66D9EF 0%,
        #AE81FF 50%,
        #E6DB74 100%
      );
      transform-origin: 50% 100%;
      animation: dataFlow 3s linear infinite;
    }

@keyframes dataFlow {
      0% {
        transform: rotate(0deg);
        animation-timing-function: ease-in-out;
      }
      50% {
        transform: rotate(180deg);
        opacity: 0.5;
      }
      100% {
        transform: rotate(360deg);
        animation-timing-function: ease-in-out;
      }
    }

Recomendado

Carrusel de tarjetas con CSS

Generador de contraseñas (NEGRO)

Clínica de Cardiología: Servicios de salud cardíaca y atención cardíaca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS