The Power of Pure CSS - No JavaScript Needed

nav {
  background: #0e1238;
  font-family: "Bowlby One SC", no-serif;
  overflow: hidden;
}
ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50vh 50vh;
  list-style: none;
}
li {
  position: relative;
}
a {
  color: #e8984c;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  font-size: calc(1rem + 6vw);
}

li:last-child:after,
li:last-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  clip-path: circle(0);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 1s, clip-path 1s, transform 1s 1s;
}
li:last-child:after {
  background: white;
  mix-blend-mode: exclusion;
}
li:last-child:before {
  background: #55b992;
	-webkit-clip-path: circle(0);	
	mix-blend-mode: color-dodge;
}

li:hover ~ li:last-child:after,
li:last-child:hover:after,
li:hover ~ li:last-child:before,
li:last-child:hover:before {
  opacity: 1;
  transition: 1s ease;
}
li:first-child:hover ~ li:last-child:after {
  transform: translate3d(-100%, -100%, 0);
  clip-path: circle(7.5vw);
}
li:first-child:hover ~ li:last-child:before {
  transform: translate3d(-115%, -110%, 0);
  clip-path: circle(5vw);
}
li:nth-child(2):hover ~ li:last-child:after {
  transform: translate3d(-10%, -105%, 0);
  clip-path: circle(3vw);
}
li:nth-child(2):hover ~ li:last-child:before {
  transform: translate3d(0%, -100%, 0);
  clip-path: circle(4.5vw);
}
li:nth-child(3):hover ~ li:last-child:after {
  transform: translate3d(-95%, 0%, 0);
  clip-path: circle(6.5vw);
}
li:nth-child(3):hover ~ li:last-child:before {
  transform: translate3d(-105%, 10%, 0);
  clip-path: circle(6.5vw);
}
li:last-child:hover:after {
  transform: translate3d(-5%, 0%, 0);
  clip-path: circle(5.5vw);
}
li:last-child:hover:before {
  transform: translate3d(4%, 0%, 0);
  clip-path: circle(4.5vw);
}

@media (max-width: 30em) {
  nav a {
    font-size: 4rem;
  }
  ul {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  li {
    flex: 1;
  }
  li:last-child:after,
  li:last-child:before
  {
    transform: translate3d(0%, -150%, 0);
  }
  li:first-child:hover ~ li:last-child:after {
    transform: translate3d(0, -300%, 0);
    clip-path: circle(11vh);
  }
  li:first-child:hover ~ li:last-child:before {
    transform: translate3d(10%, -290%, 0);
    clip-path: circle(9vh);
  }
  li:nth-child(2):hover ~ li:last-child:after {
    transform: translate3d(0%, -200%, 0);
    clip-path: circle(6vh);
  }
  li:nth-child(2):hover ~ li:last-child:before {
    transform: translate3d(10%, -195%, 0);
    clip-path: circle(7vh);
  }
  li:nth-child(3):hover ~ li:last-child:after {
    transform: translate3d(0, -100%, 0);
    clip-path: circle(8vh);
  }
   li:nth-child(3):hover ~ li:last-child:before {
    transform: translate3d(-10%, -100%, 0);
    clip-path: circle(4vh);
  }
  li:last-child:hover:after {
    transform: translate3d(0%, 0%, 0);
    clip-path: circle(8vh);
  }
  li:last-child:hover:before {
    transform: translate3d(20%, 0%, 0);
    clip-path: circle(6vh);
  }
}

29

Direction-Aware Hover Effect

By: pixeldev

body {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  background: #181c21;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.loader {
  width: 45px;
  height: 90px;
  position: relative;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0 0 20px;
  border-radius: 15px 15px 10px 10px;
  padding: 1px;
  background: repeating-linear-gradient(-45deg, #91d2e2 0 8px, #1296a7 0 12px)
    content-box;
  --c: radial-gradient(farthest-side, #000 94%, #0000);
  -webkit-mask:
    linear-gradient(#0000 0 0),
    var(--c) -10px -10px,
    var(--c) 15px -14px,
    var(--c) 9px -6px,
    var(--c) -12px 9px,
    var(--c) 14px 9px,
    var(--c) 23px 27px,
    var(--c) -8px 35px,
    var(--c) 50% 50%,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0),
    var(--c) -10px -10px,
    var(--c) 15px -14px,
    var(--c) 9px -6px,
    var(--c) -12px 9px,
    var(--c) 14px 9px,
    var(--c) 23px 27px,
    var(--c) -8px 35px,
    var(--c) 50% 50%,
    linear-gradient(#0000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude, add, add, add, add, add, add, add, add;
  -webkit-mask-repeat: no-repeat;
  animation: l2 3s infinite ease-out;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 50% calc(50% - 4px) 0;
  background: #e0a267;
  border-radius: 50px;
}
@keyframes l2 {
  0% {
    -webkit-mask-size:
      auto,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  10% {
    -webkit-mask-size:
      auto,
      25px 25px,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  20% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  30% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  40% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      30px 30px,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  50% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      30px 30px,
      25px 25px,
      0 0,
      0 0,
      0 0;
  }
  60% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      30px 30px,
      25px 25px,
      25px 25px,
      0 0,
      0 0;
  }
  70% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      30px 30px,
      25px 25px,
      25px 25px,
      25px 25px,
      0 0;
  }
  80%,
  100% {
    -webkit-mask-size:
      auto,
      25px 25px,
      25px 25px,
      30px 30px,
      30px 30px,
      25px 25px,
      25px 25px,
      25px 25px,
      200% 200%;
  }
}

28

Popsicle Loader

By: pixeldev

.loader-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.traffic-light {
  background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 40%, #1e1e1e 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 20px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  position: relative;
  width: 100px;
}

.light-row {
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.light-row:first-child {
  margin-top: 0;
}

.light-row:last-child {
  margin-bottom: 0;
}

.light {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.06);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.light::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 28px;
  height: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.4;
}

.light::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 65%
  );
}

.red-light {
  background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),
    linear-gradient(135deg, #331212, #1a0606);
  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 -3px 6px rgba(255, 255, 255, 0.02);
  animation: redSequence 4s ease-in-out infinite;
}

@keyframes redSequence {
  0% {
    background: radial-gradient(circle at center, #ff4444 0%, #cc1111 80%),
      linear-gradient(135deg, #ff5555, #dd2222);
    border-color: rgba(255, 68, 68, 0.25);
    box-shadow:
      0 0 40px rgba(255, 68, 68, 0.6),
      0 0 80px rgba(255, 68, 68, 0.3),
      0 0 120px rgba(255, 68, 68, 0.15),
      inset 0 3px 6px rgba(255, 255, 255, 0.15),
      inset 0 -3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
  }

25%,
  75%,
  100% {
    background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),
      linear-gradient(135deg, #331212, #1a0606);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      inset 0 6px 12px rgba(0, 0, 0, 0.4),
      inset 0 -3px 6px rgba(255, 255, 255, 0.02);
    transform: scale(1);
  }
}

.yellow-light {
  background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),
    linear-gradient(135deg, #333312, #1a1a06);
  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 -3px 6px rgba(255, 255, 255, 0.02);
  animation: yellowSequence 4s ease-in-out infinite;
}

@keyframes yellowSequence {
  0%,
  50%,
  100% {
    background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),
      linear-gradient(135deg, #333312, #1a1a06);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      inset 0 6px 12px rgba(0, 0, 0, 0.4),
      inset 0 -3px 6px rgba(255, 255, 255, 0.02);
    transform: scale(1);
  }

25% {
    background: radial-gradient(circle at center, #ffdd44 0%, #cc9900 80%),
      linear-gradient(135deg, #ffee55, #ddaa22);
    border-color: rgba(255, 221, 68, 0.25);
    box-shadow:
      0 0 40px rgba(255, 221, 68, 0.6),
      0 0 80px rgba(255, 221, 68, 0.3),
      0 0 120px rgba(255, 221, 68, 0.15),
      inset 0 3px 6px rgba(255, 255, 255, 0.15),
      inset 0 -3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
  }
}

.green-light {
  background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),
    linear-gradient(135deg, #123312, #061a06);
  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 -3px 6px rgba(255, 255, 255, 0.02);
  animation: greenSequence 4s ease-in-out infinite;
}

@keyframes greenSequence {
  0%,
  25%,
  75% {
    background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),
      linear-gradient(135deg, #123312, #061a06);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      inset 0 6px 12px rgba(0, 0, 0, 0.4),
      inset 0 -3px 6px rgba(255, 255, 255, 0.02);
    transform: scale(1);
  }

50%,
  100% {
    background: radial-gradient(circle at center, #44ff44 0%, #11cc11 80%),
      linear-gradient(135deg, #55ff55, #22dd22);
    border-color: rgba(68, 255, 68, 0.25);
    box-shadow:
      0 0 40px rgba(68, 255, 68, 0.6),
      0 0 80px rgba(68, 255, 68, 0.3),
      0 0 120px rgba(68, 255, 68, 0.15),
      inset 0 3px 6px rgba(255, 255, 255, 0.15),
      inset 0 -3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
  }
}

.loading-status {
  font-size: 12px;
  color: #0317fc;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: statusUpdate 4s ease-in-out infinite;
}

.loading-status::before {
  content: "Initializing red signal...";
  animation: textUpdate 4s ease-in-out infinite;
}

@keyframes textUpdate {
  0%,
  24% {
    content: "Initializing red signal...";
  }
  25%,
  49% {
    content: "Preparing yellow transition...";
  }
  50%,
  74% {
    content: "Activating green protocol...";
  }
  75%,
  100% {
    content: "Completing traffic sequence...";
  }
}

@keyframes statusUpdate {
  0%,
  100% {
    opacity: 1;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    opacity: 0.5;
  }
}

28

Traffic Light Loader Animation

By: pixeldev

@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i');

*, *:before, *:after {
	margin: 0;
	padding: 0;
	word-break: break-all;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 10px;
}

body {
	font-family: 'Ubuntu', sans-serif;
	color: #6e6e6e;
	font-size: 1.6rem;
  background: black;
}

header, footer {
  display: block;
}

a, a:link, a:visited {
  text-decoration: none;
}

img {
	border: 0;
}

ul {
	list-style: none;
}

.center {
  width: 1170px;
  margin: 20px auto 0;
}

.holder {
  margin: 12rem auto 0;
  width: 150px;
  height: 400px;
  position: relative;
}

.holder *, .holder *:before, .holder *:after {
  position: absolute;
  content: "";
}

.candle {
  bottom: 0;
  width: 150px;
  height: 300px;
  border-radius: 150px / 40px;
  box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
  width: 100%;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #d47401;
  background: #b86409;
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
  width: 34px;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 14px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {  
  width: 6px;
  height: 36px;
  top: -17px;
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  transform: translateX(-50%);
  background: #121212;
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 24px;
  height: 120px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes enlargeFlame {
  0%, 100% {
    height: 120px;
  }
  50% {
    height: 140px;
  }
}

.glow {
  width: 26px;
  height: 60px;
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}

.glow:before {
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
  width: 100px;
  height: 180px;
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  filter: blur(60px);
  animation: blinkIt .1s infinite;
}

@keyframes blinkIt {
  50% { opacity: .8;}
}

28

Candle Flame Animation

By: pixeldev

26

Bubble Effect

By: pixeldev

body{
  background:black;
}

.container{
  margin:80px auto;
  width: 60px;
  height: 60px;
  position:relative;
  transform-origin:center bottom;
  animation-name: flicker;
  animation-duration:3ms;
  animation-delay:200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.flame{
  bottom:0;
  position:absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform:rotate(-45deg) scale(1.5,1.5);
}

.yellow{
  left:15px; 
  width: 30px;
  height: 30px;
  background:gold;
  box-shadow: 0px 0px 9px 4px gold;
}

.orange{
  left:10px; 
  width: 40px;
  height: 40px;
  background:orange;
  box-shadow: 0px 0px 9px 4px orange;
}

.red{
  left:5px;
  width: 50px;
  height: 50px;
  background:OrangeRed;
  box-shadow: 0px 0px 5px 4px OrangeRed;
}

.white{
  left:15px; 
  bottom:-4px;
  width: 30px;
  height: 30px;
  background:white;
  box-shadow: 0px 0px 9px 4px white;
}

.circle{
  border-radius: 50%;
  position:absolute;  
}

.blue{
  width: 10px;
  height: 10px;
  left:25px;
  bottom:-25px; 
  background: SlateBlue;
  box-shadow: 0px 0px 15px 10px SlateBlue;
}

.black{
  width: 40px;
  height: 40px;
  left:10px;
  bottom:-60px;  
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}

@keyframes flicker{
  0%   {transform: rotate(-1deg);}
  20%  {transform: rotate(1deg);}
  40%  {transform: rotate(-1deg);}
  60%  {transform: rotate(1deg) scaleY(1.04);}
  80%  {transform: rotate(-2deg) scaleY(0.92);}
  100% {transform: rotate(1deg);}
}

26

All

Direction-Aware Hover Effect

By: pixeldev

Popsicle Loader

By: pixeldev

Traffic Light Loader Animation

By: pixeldev

Candle Flame Animation

By: pixeldev

Bubble Effect

By: pixeldev

Flame Animation

By: pixeldev