div+css实现高层楼层下拉滚动视觉差异立体幻灯片文本显示效果代码
代码语言:html
所属分类:视觉差异
代码描述:div+css实现高层楼层下拉滚动视觉差异立体幻灯片文本显示效果代码
代码标签: div css 高层 楼层 下拉 滚动 视觉 差异 立体 文本 幻灯片 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --depth: 500px; --turnLeft: 0.06turn; --turnRight: -0.06turn; --turn: var(--turnRight); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; overflow: hidden; } body { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; background: hsl(0 0% 10%); perspective: 1000px; perspective-origin: 50% 35%; } .building { transform-style: preserve-3d; } .room { position: relative; border: 4vh solid hsl(0 0% 10%); height: 80vh; width: 100vw; scroll-snap-align: center; transform-style: preserve-3d; } .room + .room { bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0