Fluxo de dados de animação de coração em HTML

917 byby.createsite

Abrir no Editor Video Publique Seu Código

Fluxo de dados de animação de coração em HTML

Recomendado

15 August 2025

Estrutura de layout do CSS Office

4 May 2025

Mensagem de motivação

28 August 2025

Estúdio de Design de Arquitetura: Design Moderno e Sustentável

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

Estrutura de layout do CSS Office

Mensagem de motivação

Estúdio de Design de Arquitetura: Design Moderno e Sustentável

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS