Webleb - Snippets de Código - Fluxo de dados de animação de coração em HTML

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

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

Recomendado

Exemplo de botão HTML Neon

Projeto Shader WebGL

Animação de carregamento CSS com imagem de fundo

HTML

CSS

JS

Recomendado

Exemplo de botão HTML Neon

Projeto Shader WebGL

Animação de carregamento CSS com imagem de fundo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS