[javascript] ❍ Kreisförmige Animationen Set Nr. 2

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

22 July 2025

Samsung Galaxy S24 Ultra Landing Page

16 January 2025

<h1>CIRCLE ANIMATIONS COLLECTION N°2</h1>
<div class="container">
  <div class="animation-container">
    <div class="animation-title">Radial Pulse</div>
    <div id="radial-pulse" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Orbital Pulse</div>
    <div id="orbital-pulse" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Pendulum Wave</div>
    <div id="pendulum-wave" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Pulse Wave</div>
    <div id="pulse-wave" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Concentric Rings</div>
    <div id="concentric-rings" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Sequential Pulse</div>
    <div id="sequential-pulse" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Oscillating Dots</div>
    <div id="oscillating-dots" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Pulsing Grid</div>
    <div id="pulsing-grid" class="circle-container"></div>
  </div>

<div class="animation-container">
    <div class="animation-title">Spiral Galaxy</div>
    <div id="spiral-galaxy" 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: 900px) {
  .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;
}

.line {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: 0% 50%;
}

.circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Corner decorations */
.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;
}

/* Animation keyframes */
@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }

100% {
    transform: rotate(360deg);
  }
}

@keyframes reverseOrbit {
  0% {
    transform: rotate(0deg);
  }

100% {
    transform: rotate(-360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }

50% {
    transform: scale(1.2);
    opacity: 1;
  }

100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.1);
    opacity: 0.6;
  }

100% {
    transform: scale(1);
    opacity: 0;
  }
}

JS

[javascript] ❍ Kreisförmige Animationen Set Nr. 2

Empfohlen

Samsung Galaxy S24 Ultra Landing Page

Ein Code von mematixd3162

Ein Code von shasshan7236

HTML

CSS

JS

Empfohlen

Samsung Galaxy S24 Ultra Landing Page

Ein Code von mematixd3162

Ein Code von shasshan7236

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS