Un código de slowlogic9

Abrir en el editor Publica tu código

Recomendado

5 July 2025

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

11 April 2025

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<body>
    <audio id="background-music" loop>
      <source
        src="https://github.com/ecemgo/mini-samples-great-tricks/raw/main/song-list/stranger-things-luxide-remix-no-copyright-music.mp3"
        type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <button id="play-pause-button">
      <ion-icon class="audio-icon" id="play-music" name="play"></ion-icon>
      <ion-icon
        class="audio-icon hidden"
        id="pause-music"
        name="pause"></ion-icon>
    </button>

<div class="container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c91f906b-5881-47b1-89e4-e4a69c1961a7" />
            <p>Lucas</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5bc859f0-db4f-4ab4-8f5f-e55977c33eb1" />
            <p>Mike</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d239a63a-a0f8-4213-82dc-bb8d3f0806db" />
            <p>Max</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9c0637aa-b440-4aef-93f3-ea20cf19f42c" />
            <p>Will</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6a90b5ba-9f3e-4cb3-a8e2-3ae19b2aa443" />
            <p>Eleven</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fe05145f-c9ab-457f-a91b-92a4c1bd633c" />
            <p>Dustin</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1158c3d4-81d5-4dfc-bb42-863f357ecdb5" />
            <p>Eddie Munson</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c8ef23d2-37ee-4473-ad86-d9c9911be3bb" />
            <p>Steve</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/29eff421-1087-4b51-92a2-a7f204098187" />
            <p>Robin</p>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </body>
  <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: #111113;
  background-image: radial-gradient(
    circle at top left,
    #950923 10%,
    #111113 30%
  );

}

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container {
  width: 80%;
}

.swiper {
  width: 100%;
  padding: 50px 0;
}
.swiper-slide {
  position: relative;
  width: 200px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  transition: 1s;
  user-select: none;
}

.swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(130, 13, 13, 0.8),
    rgba(39, 8, 92, 0.8)
);
  mix-blend-mode: multiply;
  z-index: 1;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}

.swiper-slide p {
  position: absolute;
  left: 20px;
  bottom: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 2px;
  z-index: 2;
  opacity: 0;
  transform: rotate(360deg) scale(0);
  transition: 0.8s;
}

.swiper-slide-active {
  position: relative;
  width: 350px;
  transition: 1s;
}

.swiper-slide-active::after {
  background: rgba(123, 123, 123, 0.4);
}

.swiper-slide-active img {
  transform: scale(1.3);
  object-position: 50% 0%;
}

.swiper-slide-active p {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

.swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.6s ease-in-out;
}

.swiper-pagination-bullet-active {
  width: 32px;
  background-color: #6f1223;
  border-radius: 14px;
}

.audio-icon {
  font-size: 2rem;
  color: #fff;
}

#play-pause-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 3%;
  bottom: 5%;
  background-color: transparent;
  background-image: radial-gradient(
    50% 115% at 50% -5%,
    rgba(255, 255, 255, 0.11) 0%,
    transparent 100%
  );
  box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14),
    inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11),
    inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4),
    inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
  z-index: 10;
  border: 0;
  border-radius: 50%;
  outline: 0;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#play-pause-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

#play-pause-button:active {
  transform: scale(0.95);
}

.hidden {
  display: none;
}

JS

const audio = document.getElementById("background-music");
const playPauseButton = document.getElementById("play-pause-button");
const playIcon = document.getElementById("play-music");
const pauseIcon = document.getElementById("pause-music");

let isPlaying = false;

playPauseButton.addEventListener("click", togglePlayPause);

audio.addEventListener("ended", function () {
  audio.currentTime = 0;
  audio.play();
});

var swiper = new Swiper(".swiper", {
  grabCursor: true,
  initialSlide: 4,
  centeredSlides: true,
  slidesPerView: "auto",
  spaceBetween: 10,
  speed: 1000,
  freeMode: false,
  mousewheel: {
    thresholdDelta: 30,
  },
  pagination: {
    el: ".swiper-pagination",
  },
  on: {
    click(event) {
      swiper.slideTo(this.clickedIndex);
    },
  },
});

particlesJS("particles-js", {
  particles: {
    number: {
      value: 180,
      density: {
        enable: true,
        value_area: 800,
      },
    },
    color: {
      value: "#fff",
    },
    shape: {
      type: "circle",
    },
    opacity: {
      value: 0.3,
      random: false,
      anim: {
        enable: false,
        speed: 4,
        opacity_min: 0.1,
        sync: false,
      },
    },
    size: {
      value: 4,
      random: true,
      anim: {
        enable: true,
        speed: 2,
        size_min: 0.1,
        sync: false,
      },
    },
    line_linked: {
      enable: false,
    },
    move: {
      enable: true,
      speed: 0.4,
      direction: "right",
      random: true,
      straight: false,
      out_mode: "none",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200,
      },
    },
  },
  retina_detect: true,
});

Un código de slowlogic9

Recomendado

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

Botón de página no válida

Un código de zegarekdawida

HTML

CSS

JS

Recomendado

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

Botón de página no válida

Un código de zegarekdawida

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS