div+css实现三维纸张盖板风吹动画效果代码-html代码-BFW代码库

div+css实现三维纸张盖板风吹动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现三维纸张盖板风吹动画效果代码

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

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

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



  
  
<style>
* { transform-style:preserve-3d }
body {
  display:grid;place-content:center;width:100%;height:100vh;
  transition:all 1s;
  perspective:500px;
  overflow:hidden;
}
a {color:white}
#s {
  place-content:center;display:grid;width:30vmin;height:30vmin;
  --xx: calc(2 * (var(--x, 0.15) - 0.5));
  --yy: calc(2 * (var(--y, 0.75) - 0.5));
  background:#222;color:white;
  box-shadow:
    calc(1vmin * var(--xx)) calc(1vmin * var(--yy)) 0 4vmin #222,
    inset 0 calc(2vmin * var(--yy)) 0 0 #eee
    ;
  transform:rotatey(calc(-30deg * var(--xx)))rotatex(calc(30deg*var(--yy)));
  position:relative;
}
#s:after {
  content:'';display:block;width:100%;height:5%;
  position:absolute;top:99.5%;
  background:#eee;
}

#a,#b {
  display:block;width:100%;height:100%;
  position:absolute;box-shadow:inset 0 0 10vmin #ddd;
  background:white;
}
#a {height:50.........完整代码请登录后点击上方下载按钮下载查看