Hiệu ứng CSS đẹp Miễn Phí

Cung cấp mã code CSS đẹp miễn phí

Hiệu ứng border gradient động

gradient-border

.gradient-border {
  position: relative;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff;
  z-index: 0;
}
.gradient-border::before {
  content: \"\";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, #00f, #0ff, #f0f, #f00);
  background-size: 400% 400%;
  animation: gradientMove 5s ease infinite;
  z-index: -1;
  border-radius: 12px;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Hiệu ứng rung nhẹ (Vibration)

vibrate

.vibrate {
  display: inline-block;
  animation: vibrate 0.3s linear infinite;
}
@keyframes vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

Hiệu ứng bật sáng khi hover (Glow Pulse)

glow-hover

.glow-hover {
  background-color: #111;
  color: white;
  border: none;
  padding: 10px 20px;
  transition: box-shadow 0.4s ease;
}
.glow-hover:hover {
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff, 0 0 30px #00f7ff;
}

Hiệu ứng viền phát sáng Neon (NEO)

neon-border

.neon-border {
  border: 2px solid #0ff;
  box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  transition: box-shadow 0.3s ease;
}
.neon-border:hover {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
}

Hiệu ứng đổ bóng mềm mại (Soft Shadow)

soft-shadow

.soft-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.soft-shadow:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

Hiệu ứng Zoom khi hover

zoom-effect

.zoom-effect {
  transition: transform 0.3s ease;
}
.zoom-effect:hover {
  transform: scale(1.1);
}

Hiệu ứng Fade In (mờ dần xuất hiện)

fade-in

.fade-in {
  opacity: 0;
  animation: fadeInAnimation 1s forwards;
}

@keyframes fadeInAnimation {
  to {
    opacity: 1;
  }
}

Hiệu ứng Slide từ trái sang phải

slide-in-left

.slide-in-left {
  transform: translateX(-100%);
  animation: slideInLeft 0.5s forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
  }
}

Hiệu ứng Bounce (nhún nhảy)

bounce

.bounce {
  animation: bounceAnimation 1s infinite;
}

@keyframes bounceAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

Nền tảng công nghệ AI hàng đầu Việt Nam, cung cấp giải pháp toàn diện cho chuyển đổi số doanh nghiệp.
Chủ sở hữu ông Trần Tuấn Anh
Zalo: 0792762794
Hotline: 0792762794

🎶 Auto Music