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

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

13 January 2025

Ein Code von khachamohammed620

HTML

<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

Ein Code von mo832860

112 BEDIENER

Ein Code von khachamohammed620

HTML

CSS

JS

Empfohlen

Ein Code von mo832860

112 BEDIENER

Ein Code von khachamohammed620

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS