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

749 byby.createsite

Abrir en el editor Publica tu código

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

Recomendado

16 August 2024

Tienda de tokens de Discord

7 December 2025

Fragmento HTML de enlaces a redes sociales

25 November 2025

Cargador de juegos HTML5 con SDK de Yandex Games

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

Tienda de tokens de Discord

Fragmento HTML de enlaces a redes sociales

Cargador de juegos HTML5 con SDK de Yandex Games

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS