Colección de animaciones circulares CSS

1,346 matheusbulhoes0

Abrir en el editor Publica tu código

Recomendado

26 February 2025

Un código de securearray494

13 March 2026

Conceptos básicos de Baldie Plus

23 July 2024

Iniciar sesión de vidrio

HTML

<h1>CIRCLE ANIMATIONS COLLECTION</h1>
<div class="container">
  
  <div class="animation-container">
    <div class="animation-title">Pulsating Circles</div>
    <div id="anim1" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Rotating Orbits</div>
    <div id="anim2" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Sequential Rings</div>
    <div id="anim3" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Concentric Rotations</div>
    <div id="anim4" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Circular Waves</div>
    <div id="anim5" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Expanding Lines</div>
    <div id="anim6" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Breathing Grid</div>
    <div id="anim7" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Ripple Effect</div>
    <div id="anim8" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Fibonacci Spiral</div>
    <div id="anim9" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Halftone Gradient</div>
    <div id="anim10" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Silver Spiral</div>
    <div id="anim11" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Sunflower Spiral</div>
    <div id="anim12" class="circle-container"></div>
  </div>
</div>

CSS

@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

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

body {
  background: #000;
  color: #f0f0f0;
  font-family: "TheGoodMonolith", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

h1 {
  margin-bottom: 30px;
  font-size: 24px;
  letter-spacing: 1px;
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.animation-container {
  position: relative;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  transition: border-color 0.3s ease;
}

.animation-container:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.animation-title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.circle-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

/* Corner decorations for all animation containers */
.corner {
  position: absolute;
  width: 16px;
  height: 16px;
  color: white;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.animation-container:hover .corner {
  opacity: 1;
}

.top-left {
  top: -8px;
  left: -8px;
  transition-delay: 0s;
}

.top-right {
  top: -8px;
  right: -8px;
  transform: rotate(90deg);
  transition-delay: 0.1s;
}

.bottom-left {
  bottom: -8px;
  left: -8px;
  transform: rotate(-90deg);
  transition-delay: 0.2s;
}

.bottom-right {
  bottom: -8px;
  right: -8px;
  transform: rotate(180deg);
  transition-delay: 0.3s;
}

/* 1. Pulsating Circles */
.pulse-dot {
  opacity: 0;
  transform-origin: center;
  animation: pulseFadeIn 3s infinite ease-in-out;
}
@keyframes pulseFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  40%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* 2. Rotating Orbits */
.orbit-container {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: rotate 8s infinite linear;
}
@keyframes rotate {
  to {
    transform: rotateZ(360deg);
  }
}

/* 3. Sequential Rings */
@keyframes expandRing {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  40%,
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

/* 4. Concentric Rotations */
.concentric-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.concentric-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: rotateRing linear infinite;
}
@keyframes rotateRing {
  to {
    transform: rotate(360deg);
  }
}

/* 5. Circular Waves */
.circular-wave-dot {
  animation: circularWave 3s infinite ease-in-out;
  transform-origin: center;
}
@keyframes circularWave {
  0% {
    transform: scale(0.7);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0.3;
  }
}

/* 6. Expanding Lines */
.line-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateLines 8s infinite linear;
  transform-origin: center;
}
@keyframes rotateLines {
  to {
    transform: rotate(360deg);
  }
}
.expanding-line {
  position: absolute;
  height: 1px;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.3);
  animation: expandLine 4s infinite ease-in-out;
}
@keyframes expandLine {
  0% {
    width: 0;
    opacity: 0;
  }
  20%,
  80% {
    width: 70px;
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

/* 7. Breathing Grid */
.breathing-dot {
  animation: breathe 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
@keyframes breathe {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
}

/* 8. Ripple Effect */
.ripple-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ripple-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 4s infinite cubic-bezier(0, 0.5, 0.5, 1);
}
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 180px;
    height: 180px;
    opacity: 0;
  }
}

/* New ripple wave dot animation */
.ripple-wave-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  transform-origin: center;
}

@keyframes rippleWave {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.8);
    opacity: 1;
  }
}

/* 9. Fibonacci Spiral (div version) */
.fibonacci-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 30s infinite linear;
  transform-origin: center;
}
@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}
.fibonacci-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: fibPulse 3s infinite ease-in-out;
}
@keyframes fibPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 10. Halftone Gradient */
.halftone-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 20s infinite linear;
  transform-origin: center;
}
.halftone-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: halftoneFade 4s infinite ease-in-out;
}
@keyframes halftoneFade {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 11. Silver Spiral */
.silver-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 25s infinite reverse linear;
  transform-origin: center;
}
.silver-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: silverPulse 3s infinite ease-in-out;
}
@keyframes silverPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

(function initCircleAnimations2025() {
  function setupPulsatingCircles() {
    const c = document.getElementById("anim1");
    if (!c) return;
    c.innerHTML = "";
    const center = document.createElement("div");
    center.className = "dot pulse-dot";
    center.style.width = center.style.height = "8px";
    center.style.left = "calc(50% - 4px)";
    center.style.top = "calc(50% - 4px)";
    c.appendChild(center);
    for (let r = 0; r < 4; r++) {
      const radius = 15 + r * 15,
        count = 6 + r * 3;
      for (let i = 0; i < count; i++) {
        const d = document.createElement("div");
        d.className = "dot pulse-dot";
        const angle = (i / count) * 2 * Math.PI;
        const x = Math.cos(angle) * radius,
          y = Math.sin(angle) * radius;
        const sz = 3 + r * 0.3;
        d.style.width = d.style.height = `${sz}px`;
        d.style.left = `calc(50% + ${x}px - ${sz / 2}px)`;
        d.style.top = `calc(50% + ${y}px - ${sz / 2}px)`;
        d.style.animationDelay = `${r * 0.2 + i * 0.1}s`;
        d.style.background = `rgba(255,255,255,${(90 - r * 10) / 100})`;
        c.appendChild(d);
      }
    }
  }

function setupRippleEffect() {
    const c = document.getElementById("anim8");
    if (!c) return;
    c.innerHTML = "";

// Center dot
    const cd = document.createElement("div");
    cd.className = "dot";
    cd.style.width = cd.style.height = "8px";
    cd.style.left = "calc(50% - 4px)";
    cd.style.top = "calc(50% - 4px)";
    cd.style.background = "rgba(255,255,255,0.9)";
    cd.style.zIndex = "10";
    c.appendChild(cd);

// Ripple container
    const rc = document.createElement("div");
    rc.className = "ripple-container";
    c.appendChild(rc);

// Create ripple rings
    const numRipples = 4;
    const rippleDuration = 4; // seconds

for (let i = 0; i < numRipples; i++) {
      const r = document.createElement("div");
      r.className = "ripple-ring";
      r.style.animationDelay = `${i * (rippleDuration / numRipples)}s`;
      rc.appendChild(r);
    }

// Create dots that will react to the ripple
    const numRings = 6;
    const maxRadius = 80;

for (let ring = 0; ring < numRings; ring++) {
      const radius = 15 + (ring * (maxRadius - 15)) / (numRings - 1);
      const numDots = 6 + ring * 3;

for (let i = 0; i < numDots; i++) {
        const angle = (i / numDots) * 2 * Math.PI;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;

// Calculate distance from center (normalized to 0-1)
        const distanceFromCenter = Math.sqrt(x * x + y * y) / maxRadius;

// Create the dot
        const d = document.createElement("div");
        d.className = "ripple-wave-dot";

// Size decreases as we move outward
        const size = 5 - ring * 0.5;
        d.style.width = d.style.height = `${size}px`;
        d.style.left = `calc(50% + ${x}px - ${size / 2}px)`;
        d.style.top = `calc(50% + ${y}px - ${size / 2}px)`;

// Set animation
        d.style.animation = "rippleWave 1s infinite ease-in-out";

// Delay based on distance from center - this creates the wave effect
        // Multiply by rippleDuration to match the ripple timing
        d.style.animationDelay = `${
          distanceFromCenter * (rippleDuration / 1.2)
        }s`;

// Opacity and color based on ring
        d.style.background = `rgba(255,255,255,${(90 - ring * 10) / 100})`;

c.appendChild(d);
      }
    }
  }

// 12. Sunflower Spiral (perfect SVG + SMIL)
  function setupFibonacciConcentric() {
    const c = document.getElementById("anim12");
    if (!c) return;
    c.innerHTML = "";
    const N = 200;
    const SIZE = 180;
    const DOT_RADIUS = 2;
    const MARGIN = 4;
    const CENTER = SIZE / 2;
    const MAX_RADIUS = CENTER - MARGIN - DOT_RADIUS;
    const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
    const DURATION = 3;
    const svgNS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute("width", SIZE);
    svg.setAttribute("height", SIZE);
    svg.setAttribute("viewBox", `0 0 ${SIZE} ${SIZE}`);
    c.appendChild(svg);

for (let i = 0; i < N; i++) {
      const idx = i + 0.5;
      const frac = idx / N;
      const r = Math.sqrt(frac) * MAX_RADIUS;
      const theta = idx * GOLDEN_ANGLE;
      const x = CENTER + r * Math.cos(theta);
      const y = CENTER + r * Math.sin(theta);

const circle = document.createElementNS(svgNS, "circle");
      circle.setAttribute("cx", x);
      circle.setAttribute("cy", y);
      circle.setAttribute("r", DOT_RADIUS);
      circle.setAttribute("fill", "#fff");
      circle.setAttribute("opacity", "0.6");
      svg.appendChild(circle);

// radius pulse
      const animR = document.createElementNS(svgNS, "animate");
      animR.setAttribute("attributeName", "r");
      animR.setAttribute(
        "values",
        `${DOT_RADIUS * 0.5};${DOT_RADIUS * 1.5};${DOT_RADIUS * 0.5}`
      );
      animR.setAttribute("dur", `${DURATION}s`);
      animR.setAttribute("begin", `${frac * DURATION}s`);
      animR.setAttribute("repeatCount", "indefinite");
      animR.setAttribute("calcMode", "spline");
      animR.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
      circle.appendChild(animR);

// opacity pulse
      const animO = document.createElementNS(svgNS, "animate");
      animO.setAttribute("attributeName", "opacity");
      animO.setAttribute("values", "0.3;1;0.3");
      animO.setAttribute("dur", `${DURATION}s`);
      animO.setAttribute("begin", `${frac * DURATION}s`);
      animO.setAttribute("repeatCount", "indefinite");
      animO.setAttribute("calcMode", "spline");
      animO.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
      circle.appendChild(animO);
    }
  }

// Add corner decorations to all animation containers
  function addCornerDecorations() {
    document.querySelectorAll(".animation-container").forEach((container) => {
      // Create corner SVG elements
      const corners = ["top-left", "top-right", "bottom-left", "bottom-right"];

corners.forEach((position) => {
        const corner = document.createElement("div");
        corner.className = `corner ${position}`;

// Use the plus symbol SVG
        const svg = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        svg.setAttribute("width", "16");
        svg.setAttribute("height", "16");
        svg.setAttribute("viewBox", "0 0 512 512");
        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

// Create plus symbol polygon
        const polygon = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "polygon"
        );
        polygon.setAttribute(
          "points",
          "448,224 288,224 288,64 224,64 224,224 64,224 64,288 224,288 224,448 288,448 288,288 448,288"
        );
        polygon.setAttribute("fill", "currentColor");

svg.appendChild(polygon);
        corner.appendChild(svg);
        container.appendChild(corner);
      });
    });
  }

window.addEventListener("load", () => {
    setupPulsatingCircles();
    setupRotatingCircles();
    setupSequentialRings();
    setupConcentricRotations();
    setupCircularWaves();
    setupExpandingLines();
    setupBreathingGrid();
    setupRippleEffect();
    setupFibonacciSpiral();
    setupHalftoneGradient();
    setupSilverSpiral();
    setupFibonacciConcentric();
    addCornerDecorations(); // Add the corner decorations
  });
})();