Webleb - Snippet di Codice -

2325 Andev.web

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

6 August 2025

Schermo TV HTML con incorporamento di YouTube ed effetto Glitch

HTML

CSS

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

body {
  height: 100vh;
  background-color: #222221;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.item a {
  text-decoration: none;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #f0f9fe;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  border: 3px solid #f0f9fe;
  overflow: hidden;
}

.item a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 0;
  scale: 1 0;
  transform-origin: bottom;
  transition: scale 0.5s ease;
}

.item:hover a::before {
  scale: 1 1;
}

.icon {
  font-size: 2rem;
  color: hsl(203, 92%, 8%);
  transition: 0.5s ease;
  z-index: 2;
}

.item a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

.item:nth-child(1) {
  --bg-color: linear-gradient(to bottom right, #f9ce34, #ee2a7b, #6228d7);
}
.item:nth-child(2) {
  --bg-color: #0077b5;
}
.item:nth-child(3) {
  --bg-color: #ff0000;
}
.item:nth-child(4) {
  --bg-color: #000;
}

Consigliato

Sfocatura progressiva modale

Cestino casuale

Schermo TV HTML con incorporamento di YouTube ed effetto Glitch

HTML

CSS

JS

Consigliato

Sfocatura progressiva modale

Cestino casuale

Schermo TV HTML con incorporamento di YouTube ed effetto Glitch

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS