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

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

18 December 2024

<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 slowcode552

Ein Code von slowarray902

Ein Code von bachir123

HTML

CSS

JS

Empfohlen

Ein Code von slowcode552

Ein Code von slowarray902

Ein Code von bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS