css实现百叶窗视觉差异幻灯片效果代码-html代码-BFW代码库

css实现百叶窗视觉差异幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：css实现百叶窗视觉差异幻灯片效果代码，鼠标跟随实现阴影变动。

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

:root {
  --boxSize: 1em;
  --speed: 18s;
  --rotateSceneX: -0deg;
  --rotateSceneY: 0deg;
}

body {
  font-family: "Berkshire Swash", cursive;
  background-color: #aaa;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  perspective: 100em;
  overflow: hidden;
}

.cell {
  width: 100%;
  height: 100%;
}
.cell:nth-child(10n+1):hover ~ .scene {
  --rotateSceneY: -63deg;
}
.cell:nth-child(n+1):nth-child(-n+10):hover ~ .scene {
  --rotateSceneX: 36deg;
}
.cell:nth-child(10n+2):hover ~ .scene {
  --rotateSceneY: -49deg;
}
.cell:nth-child(n+11):nth-child(-n+20):hover ~ .scene {
  --rotateSceneX: 28deg;
}
.cell:nth-child(10n+3):hover ~ .scene {
  --rotateSceneY: -35deg;
}
.cell:nth-child(n+21):nth-child(-n+30):hover ~ .scene {
  --rotateSceneX: 20deg;
}
.cell:nth-child(10n+4):hover ~ .scene {
  --rotateSceneY: -21deg;
}
.cell:nth-child(n+31):nth-child(-n+40):hover ~ .scene {
  --rotateSceneX: 12deg;
}
.cell:nth-child(10n+5):hover ~ .scene {
  --rotateSceneY: -7deg;
}
.cell:nth-child(n+41):nth-child(-n+50):hover ~ .scene {
  --rotateSceneX: 4deg;
}
.cell:nth-child(10n+6):hover ~ .scene {
  --rotateSceneY: 7deg;
}
.cell:nth-child(n+51):nth-child(-n+60):hover ~ .scene {
  --rotateSceneX: -4deg;
}
.cell:nth-child(10n+7):hover ~ .scene {
  --rotateSceneY: 21deg;
}
.cell:nth-child(n+61):nth-child(-n+70):hover ~ .scene {
  --rotateSceneX: -12deg;
}
.cell:nth-child(10n+8):hover ~ .scene {
  --.........完整代码请登录后点击上方下载按钮下载查看