Efeito Gaveta

752 ledoc

Abrir no Editor Publique Seu Código

Recomendado

29 September 2024

Efeito de controle deslizante de imagem inicial do site

6 November 2024

Efeito de texto fatiado

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

Efeito Gaveta

Recomendado

efeito de revelação

Efeito de controle deslizante de imagem inicial do site

Efeito de texto fatiado

HTML

CSS

JS

Recomendado

efeito de revelação

Efeito de controle deslizante de imagem inicial do site

Efeito de texto fatiado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS