suchen

Heim >Web-Frontend >js-Tutorial >Neoneffekt auf Button-Animationsillusion mit CSS und HTML5

Neoneffekt auf Button-Animationsillusion mit CSS und HTML5

Patricia Arquette
Patricia ArquetteOriginal
2024-12-08 09:53:11769Durchsuche

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;
}

Das obige ist der detaillierte Inhalt vonNeoneffekt auf Button-Animationsillusion mit CSS und HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css using animation
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Inline-Event-Handler vs. Event-Listener: Welche Methode sollten Sie für die Webentwicklung wählen?Nächster Artikel：Inline-Event-Handler vs. Event-Listener: Welche Methode sollten Sie für die Webentwicklung wählen?

In Verbindung stehende Artikel

Mehr sehen