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