拱形3D面板（拖动滑块）

下载代码

html

css

分享到微信朋友圈

html

css

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  height: 100vh;
  background: repeating-linear-gradient(45deg, #303030 0 2px, #262626 0 7px);
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.slices {
  top: 50%;
  left: 50%;
  transform: translatey(-20vh) perspective(100vmin) rotatey(calc(var(--val)/100*var(--n-slices)*1turn/var(--n-poly)));
}

.slice {
  margin: -31.25vw -12.5vw;
  width: 25vw;
  height: 62.5vw;
  transform: rotatey(calc(var(--i)*-1turn/var(--n-poly))) translatez(calc(-.5*25vw/var(--tan))) scalex(1.0025);
  background: url(https://picsum.photos/seed/picsum/1183/600) calc(var(--i)*-25vw)/calc(var(--n-slices)*25vw) 100%;
  filter: contrast(0.65);
  transition: filter .3s;
}
.slice::before {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 100%;
  transform: scaley(-1);
  background: inherit;
  --mask: linear-gradient(transparent, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.5));
  -webkit-mask: var(--mask);
  mask: var(--mask);
  content: "";
}
.slice:hover {
  filter: none;
}

input[type='range'] {
  position: absolute;
  right: 4em;
  bottom: 4em;
  left: 4em;
  width: calc(100vw - 2*4em);
  filter: grayscale(1);
  transition: filter .3s;
}
input[type='range'], input[type='range']::-webkit-slider-thumb, input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  border: none;
  width: 100%;
  height: 0.25em;
  background: #ccc;
}
input[type='range']::-moz-range-track {
  border: none;
  width: 100%;
  height: 0.25em;
  background: #ccc;
}
input[type='range']::-webkit-slider-thumb {
  border: none;
  width: 4em;
  height: 0.25em;
  background: crimson;
  cursor: pointer;
}
input[type='range']::-moz-range-thumb {
  border: none;
  width: 4em;
  height: 0.25em;
  background: crimson;
  cursor: pointer;
}
input[type='range']:focus, input[type='range']:hover {
  outline: solid 0 transparent;
  filter: none;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg