div+css实现抽屉式拉开关闭按钮效果代码-html代码-BFW代码库

div+css实现抽屉式拉开关闭按钮效果代码

代码语言：html

代码描述：div+css实现抽屉式拉开关闭按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

    
  
  
  
<style>
#toggle {
  display: none;
}

label[for=toggle] {
  color: #f9f6ef;
  font-size: 5vmin;
  transform-style: preserve-3d;
  width: 40vmin;
  aspect-ratio: 1.5;
  border-radius: 0.8vmin;
  position: relative;
  display: grid;
  place-content: center;
  cursor: zoom-in;
  overflow: clip;
  transition: color 1s allow-discrete, box-shadow 0.7s allow-discrete;
  animation: slide-out 1s linear forwards;
}
label[for=toggle]:before {
  content: attr(data-close);
}

#toggle:checked + label[for=toggle] {
  cursor: zoom-out;
  color: #1f2020;
  animation: slide-in 1s linear forwards;
}
#toggle:checked + label[for=toggle]:before {
  content: attr(data-open);
}

@keyframes slide-in {
  0% {
    box-shadow: 0 0 1vmin 0.3vmin #1f202010, inset 0 -1.5vmin 0 #1f2020, inset 40vmin 3vmin 0 #1f2020, inset 3vmin 4vmin 4vmin #0008;
    background-color: #F9F6EF;
    background-image: repeating-linear-gradient(135deg, #0000 0 4px, #00000005 0 8px);
  }
  80% {
    box-shadow: 0 0 1vmin 0.3vmin #1f202010, inset -0.2vmin -1.5vmin 0 #1f2020, inset 2vmin 3vmin 0 #1f2020, inset 3vmin 4vmin 4vmin #0008;
    background-color: #F9F6EF;
    background-image: repeating-linear-gradient(135deg, #0000 0 4px, #00000005 0 8px);
  }
  100% {
    box-shadow: 0 0 1vmin 0.3vmin #1f202010, inset 0 0 0 #0000, inset 0 0 0 #0000, inset 0 0 0 #0000;
    background-color: #0000;
    background-image: none;
  }
}
@keyframes slide-out {
  .........完整代码请登录后点击上方下载按钮下载查看