दराज प्रभाव

1010 ledoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

25 August 2024

YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन

HTML

CSS

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

body {
  height: 100vh;
  width: 100vw;
  font-family: "Monaco";
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-bottom: 50px;
}

.drawer_wrapper {
  height: 100px;
  width: 500px;
  position: relative;
  border-radius: 10px;
}

.layer {
  position: absolute;
  inset: 0;
  transition: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 10px;
  transform-origin: bottom;
}

.info {
  position: absolute;
  padding: 10px;
  color: white;
  font-weight: lighter;
  inset: 0;
  height: 100%;
  width: 100%;
  font-size: 0.5rem;
}

.drawer_wrapper:hover .layer_5 {
  transform: perspective(70rem) rotateX(-45deg);
  transition-delay: 0ms;
  box-shadow: 0px -5px 8px 0px #00000026;
}
.drawer_wrapper:hover .layer_4 {
  transform: perspective(70rem) rotateX(-35deg);
  transition-delay: 70ms;
  box-shadow: 0px -2px 4px 0px #b9310053;
}
.drawer_wrapper:hover .layer_3 {
  transform: perspective(70rem) rotateX(-25deg);
  transition-delay: 100ms;
}
.drawer_wrapper:hover .layer_2 {
  transform: perspective(70rem) rotateX(-15deg);
  transition-delay: 150ms;
}
.drawer_wrapper:hover .layer_1 {
  transform: perspective(70rem) rotateX(-5deg);
  transition-delay: 200ms;
}
.drawer_wrapper:hover .handle {
  background-color: #c33a08;
}

.layer_1 {
  background-color: salmon;
  z-index: 1;
}

.layer_2 {
  background-color: skyblue;
  z-index: 2;
}

.layer_3 {
  background-color: orange;
  z-index: 3;
}

.layer_4 {
  background-color: orangered;
  z-index: 4;
}

.layer_5 {
  background-color: black;
  z-index: 5;
  cursor: pointer;
}

.handle {
  position: absolute;
  height: 7px;
  width: 50px;
  border: 2px solid white;
  border-radius: 10px;
  left: 50%;
  bottom: 40%;
  transform: translate(-50%, -50%);
  background-color: orangered;
  transition: 200ms ease;
}

दराज प्रभाव

अनुशंसित

GSAP होवर प्रभाव

कॉल एक्शन बटन होवर प्रभाव

YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन

HTML

CSS

JS

अनुशंसित

GSAP होवर प्रभाव

कॉल एक्शन बटन होवर प्रभाव

YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS