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 {
  --rotateSceneY: 35deg;
}
.cell:nth-child(n+71):nth-child(-n+80):hover ~ .scene {
  --rotateSceneX: -20deg;
}
.cell:nth-child(10n+9):hover ~ .scene {
  --rotateSceneY: 49deg;
}
.cell:nth-child(n+81):nth-child(-n+90):hover ~ .scene {
  --rotateSceneX: -28deg;
}
.cell:nth-child(10n+10):hover ~ .scene {
  --rotateSceneY: 63deg;
}
.cell:nth-child(n+91):nth-child(-n+100):hover ~ .scene {
  --rotateSceneX: -36deg;
}

.scene {
  position: fixed;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateZ(0em) rotateX(var(--rotateSceneX)) rotateY(var(--rotateSceneY));
  transition: transform 0.5s;
  z-index: -1;
}

.sign {
  position: absolute;
  top: -14.25em;
  left: -26em;
  width: 52em;
  height: 28.5em;
  background-color: black;
  transform-style: preserve-3d;
}
.sign_front {
  width: 100%;
  height: 100%;
  transform: translateZ(2em);
  background-image: linear-gradient(0deg, #544 2em, transparent 2em), linear-gradient(90deg, #544 2em, transparent 2em), linear-gradient(180deg, #544 2em, transparent 2em), linear-gradient(270deg, #544 2em, transparent 2em);
}
.sign_topIn, .sign_topOut {
  position: absolute;
  height: 2em;
  background-color: #634f4f;
  transform-origin: top;
  .........完整代码请登录后点击上方下载按钮下载查看