Effects & Animations / Page 2

45 Effects & Animations

Modern, responsive Effects & Animations for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="fluorescent-text">Text</div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000; /* Dark background for contrast */
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Fluorescent text styling */
.fluorescent-text {
  font-size: 40px;
  border: 2px solid #dedbdb;
  border-radius: 5px;
  padding: 5px;
  font-weight: bold;
  text-transform: uppercase;
  color: #0ff; /* Bright fluorescent color */
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff,
    0 0 80px #0ff,
    0 0 90px #0ff,
    0 0 100px #0ff,
    0 0 150px #0ff;
  animation: flicker 1.5s infinite alternate;
}

/* Flicker animation for fluorescent effect */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 40px #0ff,
      0 0 80px #0ff,
      0 0 90px #0ff,
      0 0 100px #0ff,
      0 0 150px #0ff;
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 40px #0ff,
      0 0 80px #0ff,
      0 0 90px #0ff,
      0 0 100px #0ff,
      0 0 150px #0ff;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="animated-box">WOW</div>

body {
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.animated-box {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 
              0 0 40px rgba(0, 255, 255, 0.6);
  animation: outOfBox 2s infinite alternate ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  position: relative;
}

@keyframes outOfBox {
  0% {
      transform: scale(1) rotate(0deg);
      box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 
                  0 0 40px rgba(0, 255, 255, 0.6);
  }
  50% {
      transform: scale(1.1) rotate(10deg);
      box-shadow: 0 0 30px rgba(255, 0, 255, 1), 
                  0 0 50px rgba(0, 255, 255, 0.8);
  }
  100% {
      transform: scale(1) rotate(-10deg);
      box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 
                  0 0 40px rgba(0, 255, 255, 0.6);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="pulse-box"></div>

body {
  background: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
}

.pulse-box {
  width: 150px;
  height: 150px;
  background: #ff0080;
  border-radius: 20px;
  box-shadow: 0 0 10px #ff0080, 0 0 40px #ff0080;
  animation: pulse 1.5s infinite alternate ease-in-out;
}

@keyframes pulse {
  0% {
      transform: scale(1);
      box-shadow: 0 0 10px #ff0080, 0 0 40px #ff0080;
  }
  100% {
      transform: scale(1.1);
      box-shadow: 0 0 20px #ff00ff, 0 0 60px #ff00ff;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="floating-box"></div>

body {
  background: #0f0f0f;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
}

.floating-box {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #00ffea, #00aaff);
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 255, 234, 0.6);
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%, 100% {
      transform: translateY(0) scale(1);
  }
  50% {
      transform: translateY(-20px) scale(1.5);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="electric-text">
  Shinning
  <div class="sparks">
      <svg class="spark" viewBox="0 0 100 100">
          <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" />
      </svg>
      <svg class="spark" viewBox="0 0 100 100">
          <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" />
      </svg>
      <svg class="spark" viewBox="0 0 100 100">
          <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" />
      </svg>
      <svg class="spark" viewBox="0 0 100 100">
          <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" />
      </svg>
      <svg class="spark" viewBox="0 0 100 100">
          <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" />
      </svg>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    overflow: hidden;
}

.electric-text {
    font-size: 50px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    color: #0ff;
    position: relative;
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0% { opacity: 1; text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff; }
    50% { opacity: 0.8; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; }
    100% { opacity: 1; text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 25px #0ff; }
}

/* Sparks Container */
.sparks {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* SVG Sparks */
.spark {
    position: absolute;
    width: 20px;
    height: 20px;
    fill: #0ff;
    opacity: 0;
    animation: spark-animation 1.5s infinite;
}

/* Random spark positions */
.spark:nth-child(1) { top: -40px; left: 10px; animation-delay: 0s; }
.spark:nth-child(2) { top: -20px; right: -30px; animation-delay: 0.3s; }
.spark:nth-child(3) { bottom: -30px; left: -20px; animation-delay: 0.6s; }
.spark:nth-child(4) { bottom: -40px; right: 10px; animation-delay: 0.9s; }
.spark:nth-child(5) { top: -10px; left: -50px; animation-delay: 1.2s; }

/* Spark Animation */
@keyframes spark-animation {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.1); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<h1 id="boomdevs_14" id="flaming-plasma">Flaming Plasma
  <svg>
    <filter id="plasma">
      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" />
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    <text x="50%" y="50%" text-anchor="middle" fill="orange" filter="url(#plasma)" font-size="60" font-weight="bold">
      Flaming Plasma
    </text>
  </svg>
</h1>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: transparent;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}
h1 {
  font-size: 60px;
  font-weight: bold;
  position: relative;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="circuit-container">
  <div class="circuit-text">Circuit</div>
  <svg class="circuit-svg" viewBox="0 0 300 200">
    <!-- Central Node -->
    <circle class="circuit-node" cx="150" cy="100" r="4" />
    
    <!-- Main Branches from Center -->
    <line class="circuit-line" x1="150" y1="100" x2="50" y2="30" />
    <line class="circuit-line" x1="150" y1="100" x2="250" y2="30" />
    <line class="circuit-line" x1="150" y1="100" x2="50" y2="170" />
    <line class="circuit-line" x1="150" y1="100" x2="250" y2="170" />
    
    <!-- End Nodes -->
    <circle class="circuit-node" cx="50"  cy="30"  r="3" />
    <circle class="circuit-node" cx="250" cy="30"  r="3" />
    <circle class="circuit-node" cx="50"  cy="170" r="3" />
    <circle class="circuit-node" cx="250" cy="170" r="3" />
    
    <!-- Additional Branching -->
    <line class="circuit-line" x1="50"  y1="30"  x2="30"  y2="50" />
    <line class="circuit-line" x1="250" y1="30"  x2="270" y2="50" />
    <line class="circuit-line" x1="50"  y1="170" x2="30"  y2="150" />
    <line class="circuit-line" x1="250" y1="170" x2="270" y2="150" />
    
    <!-- Branch End Nodes -->
    <circle class="circuit-node" cx="30"  cy="50"  r="2" />
    <circle class="circuit-node" cx="270" cy="50"  r="2" />
    <circle class="circuit-node" cx="30"  cy="150" r="2" />
    <circle class="circuit-node" cx="270" cy="150" r="2" />
  </svg>
</div>

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
.circuit-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.circuit-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;  /* Smaller font size */
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  color: #0ff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
  z-index: 2;
}
.circuit-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* Circuit traces */
.circuit-line {
  stroke: #0ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5, 5;
  animation: dash 2s linear infinite;
  filter: drop-shadow(0px 0px 3px #0ff);
}
/* Circuit nodes */
.circuit-node {
  fill: #0ff;
  filter: drop-shadow(0px 0px 3px #0ff);
  animation: nodeBlink 1.5s ease-in-out infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: -10;
  }
}
@keyframes nodeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<h1 id="boomdevs_19" id="glitch-shock">Glitch Shock
  <svg>
    <filter id="glitch">
      <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="1" result="warp" />
      <feDisplacementMap in="SourceGraphic" in2="warp" scale="20" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    <text x="50%" y="70%" text-anchor="middle" fill="red" filter="url(#glitch)" font-size="60" font-weight="bold">
      Glitch Shock
    </text>
  </svg>
</h1>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}
h1 {
  font-size: 60px;
  font-weight: bold;
  position: relative;
  color: transparent; /* Make the white text transparent */
}
svg {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="box"><span>Hello</span>
  <!-- Grid Overlay: SVG with a repeating pattern of tiny cells -->
  <div class="grid-overlay">
    <svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- Define a small grid pattern (each cell 10x10) -->
        <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
          <!-- Draw a path forming a grid cell border (top and left lines) -->
          <path d="M10 0 L0 0 L0 10" fill="none" stroke="#0ff" stroke-width="01"/>
        </pattern>
      </defs>
      <!-- Fill the entire SVG with the grid pattern -->
      <rect x="0" y="0" width="150" height="50" fill="url(#grid)" />
    </svg>
  </div>
</div>

body {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;
}
/* Base Box Style */
.box {
  position: relative;
  width: 150px;
  height: 50px;
  background: #222;
  border: 4px solid #444;
  text-align: center;
  color: #fff;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transition: background 0.3s, border-color 0.3s;
  overflow: hidden;
}
.box:hover {
  background: #000;
  border-color: #0ff;
}
/* Grid Overlay – initially hidden */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
.box:hover .grid-overlay {
  opacity: 1;
}
/* Animate the grid overlay slightly for added dynamism */
.grid-overlay svg {
  width: 100%;
  height: 100%;
  animation: grid-move 5s linear infinite;
}
@keyframes grid-move {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-5px, -5px); }
  100% { transform: translate(0, 0); }
}

<!-- No JS code needed for this element -->

45 Effects & Animations

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code