Kesan Neon pada ilusi animasi butang menggunakan css dan html5-tutorial js-php.cn

Kesan Neon pada ilusi animasi butang menggunakan css dan html5

Patricia Arquette

Lepaskan： 2024-12-08 09:53:11

asal

717 orang telah melayarinya

Neon Effect on button animation illusiion using css and html5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Illusionistic 3D Neon Button</title>
  <link rel="stylesheet" href="2.css">
</head>
<body>
  <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  overflow: hidden;
  font-family: "Courier New", monospace;
  position: relative;
  color: white;
}

/* Binary code background */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
  z-index: 0;
  pointer-events: none;
  mask: repeating-linear-gradient(
    0deg,
    transparent 0%,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 40%
  );
  animation: binaryMove 5s linear infinite;
}

@keyframes binaryMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.button-container {
  position: relative;
  z-index: 1;
}

.neon-button {
  padding: 20px 60px;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.5);
  overflow: hidden;
  transition: all 0.3s ease;
}

.neon-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  filter: blur(15px);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.neon-button:hover {
  transform: translateY(-5px) rotate(2deg);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.7);
}

.neon-button:hover::before {
  opacity: 1;
  filter: blur(25px);
}

.neon-button:active {
  transform: translateY(3px);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.9);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple-animation 1s linear infinite;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

.neon-button:active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  opacity: 0.4;
  filter: blur(10px);
  animation: ripple-animation 0.8s linear;
}

Salin selepas log masuk

Atas ialah kandungan terperinci Kesan Neon pada ilusi animasi butang menggunakan css dan html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!