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

1,006 byby.createsite

Abrir en el editor Publica tu código

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

Recomendado

11 March 2025

Formulario de inicio de sesión HTML avanzado

18 August 2024

Casilla de verificación / ¿Desarrollador o diseñador?

21 May 2024

Tela de Login

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;
      }
    }