Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 November 2024

Esempio di effetti di passaggio del mouse sul pulsante HTML

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="carousel-wrapper">
  <div class="carousel">
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    <div class="item"><img src="https://logo.clearbit.com/facebook.com" alt="Facebook"></div>
    <div class="item"><img src="https://logo.clearbit.com/netflix.com" alt="Netflix"></div>
    <div class="item"><img src="https://logo.clearbit.com/tesla.com" alt="Testla"></div>
    <div class="item"><img src="https://logo.clearbit.com/nike.com" alt="Nike"></div>
    <div class="item"><img src="https://logo.clearbit.com/adidas.com" alt="Addidas"></div>
    <div class="item"><img src="https://logo.clearbit.com/coca-cola.com" alt="Coca-Cola"></div>
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    
  </div>
</div>  
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  --bg-clr: #000000;
}
body {
  min-height: 100svh;
  display: grid;
  place-content: center;
  background-color: var(--bg-clr);
}

.carousel-wrapper {
  --width: 100px;
  --gap: 0;
  --num-items: 10;
  --ani-offset: calc(var(--width) * var(--num-items) * -1);
  --ani-speed: 10s;
  
  width: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-wrapper::before,
.carousel-wrapper::after{
  content: '';
  position: absolute;
  width: 20%;
  height: 100%;
  z-index: 1;
  top: 0;
}
.carousel-wrapper::before{
  left: 0;
  background-image: linear-gradient(to right,var(--bg-clr) 0%,transparent 50%);
}
.carousel-wrapper::after{
  right: 0;
  background-image: linear-gradient(to left,var(--bg-clr) 0%,transparent 50%);
}

.carousel {
  display: flex;
  align-items: center;
  animation: slide var(--ani-speed) linear infinite;
}
.item{
  flex: 1 0 var(--width);
  text-align: center;
  padding:1rem;
}
.item:last-child{
}
.item > img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes slide {
  100% {
    transform: translateX(var(--ani-offset));
  }
}

Consigliato

Sfondo animato Matrix

Un codice del testo

Esempio di effetti di passaggio del mouse sul pulsante HTML

HTML

CSS

JS

Consigliato

Sfondo animato Matrix

Un codice del testo

Esempio di effetti di passaggio del mouse sul pulsante HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS