css布局实现一个三维3d别墅效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个三维3d别墅效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --bg1:12,20,84; --bg2:13,14,69; --bg3:7,5,48; --shadow-floor-1:6,2,27; --shadow-floor-2:13,6,54; --light-floor-1:41,38,61; --light-floor-2:83,106,119; --light-floor-3:158,111,189; --light-floor-4:13,86,70; --light-floor-5:0,0,150; --w1:200,200,200; --w2:150,150,190; --w3:90,90,115; --b1:59,59,59; --b2:23,35,51; --b3:2,6,25; --water1:51,163,207; --water2:63,120,162; --window:215,247,247; --lamp:214,249,249; --crystal:15,22,36; } *, :after, :before { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; user-select: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-image: radial-gradient(circle, #090f42, #030324, #020114); overflow: hidden; cursor: pointer; transition: transform 0.1s linear; } .face { position: absolute; } .input { position: fixed; bottom: 4vw; left: 4vw; transform: translateZ(20000px); display: none; } @media (max-width: 600px) { .input { left: calc(50% - 50px); } } .input__label { cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .input__checkbox { position: relative; width: 100px; height: 50px; border-radius: 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #020411; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); cursor: pointer; transition: 1s; } .input__checkbox:checked { background-color: #8a95ee; } .input__checkbox:checked + .input__label .bg { background-color: #101a6f; } .input__checkbox:before { content: ""; position: absolute; width: 34px; height: 34px; top: 50%; left: 8px; transform: translateY(-50%); border-radius: 50%; border: 2px solid #ffffff; transition: 1s; } .input__checkbox:checked:before { left: calc(100% - 42px); } .lamp-b { position: absolute; width: 0.5vw; height: 0.5vw; border-radius: 50%; background-color: #d6f9f9; border: 0.1vw solid rgba(90, 90, 115, 0.25); box-shadow: 0.6vw 0.6vw 0.85vw #d6f9f9,-0.6vw 0.6vw 0.85vw #d6f9f9,0.6vw -0.6vw 0.85vw #d6f9f9,-0.6vw -0.6vw 0.85vw #d6f9f9; } .lamp-t { position: absolute; width: 0.5vw; height: 2.5vw; border-radius: 50%; background-image: linear-gradient(to top, transparent, rgba(214, 249, 249, 0.8)); border: 0.1vw solid rgba(90, 90, 115, 0.25); filter: blur(0.3vw); } .lamp-t:after, .lamp-t:before { content: ""; position: absolute; bottom: 0.1vw; width: 200%; height: 3vw; border-radius: 50%; background-image: linear-gradient(to top, transparent, rgba(214, 249, 249, 0.5), rgba(214, 249, 249, 0.2)); box-shadow: 0.15vw 0.15vw 1.5vw rgba(214, 249, 249, 0.2), -0.15vw 0.15vw 1.5vw rgba(214, 249, 249, 0.2), 0.15vw -0.15vw 1.5vw rgba(214, 249, 249, 0.2), -0.15vw -0.15vw 1.5vw rgba(214, 249, 249, 0.2); } .lamp-t:before { transform-origin: bottom left; transform: rotateZ(-10deg); } .lamp-t:after { transform-origin: bottom left; transform: rotateZ(10deg); } .house, .lamps, .shadows { position: absolute; width: 30vw; height: 35vw; transform: perspective(10000px) rotateX(60deg) rotateZ(45deg) translateZ(-10vw); } @keyframes h { 0% { transform: perspective(10000px) rotateX(60deg) rotateZ(40deg) translateZ(-10vw); } } .shadows { width: 34vw; height: 39vw; margin-top: 3vw; } .shadow { position: absolute; } .shadow-1 { top: -1vw; left: 0; width: 31.5vw; height: 37vw; background-color: rgba(6, 2, 27, 0.7); filter: blur(0.35vw); } .shadow-2 { bottom: 1vw; left: -2vw; width: 36vw; height: 42vw; background-color: rgba(13, 6, 54, 0.25); filter: blur(1vw); } .light { position: absolute; } .light-1 { bottom: -15vw; left: 15vw; width: 10vw; height: 20vw; border-radius: 50%; transform: rotateZ(-45deg); background-image: linear-gradient(to bottom, rgba(0, 0, 150, 0.2), rgba(0, 0, 150, 0.2)); filter: blur(0.95vw); } .light-2 { bottom: -25vw; width: 40vw; height: 40vw; border-radius: 50%; transform: rotateZ(-45deg); background-image: radial-gradient(rgba(0, 0, 150, 0.05), rgba(0, 0, 150, 0.05)); filter: blur(1vw); } .light-3 { bottom: 5vw; left: 20vw; width: 30vw; height: 30vw; border-radius: 50%; transform: rotateZ(-60deg); background-image: radial-gradient(rgba(0, 0, 150, 0.3) 50%, rgba(6, 2, 27, 0.1), rgba(13, 86, 70, 0.2)); box-shadow: 1vw 1vw 1vw rgba(0, 0, 150, 0.1), -1vw 1vw 1vw rgba(0, 0, 150, 0.1), 1vw -1vw 1vw rgba(0, 0, 150, 0.1), -1vw -1vw 1vw rgba(0, 0, 150, 0.1); filter: blur(1vw); } .light-4 { bottom: -25vw; right: 24vw; width: 50vw; height: 50vw; transform: rotateZ(-25deg); border-radius: 50%; background-image: linear-gradient(to right, rgba(214, 249, 249, 0.075), rgba(214, 249, 249, 0.075)); filter: blur(0.4vw); } .light-5 { width: 20vw; height: 20vw; left: -15vw; bottom: -1vw; border-radius: 50%; } .lamps { width: 34vw; height: 38vw; } .lamps .lamp-b { box-shadow: none; box-shadow: 0.5vw -0.5vw 1.75vw rgba(214, 249, 249, 0.8), -0.5vw -0.5vw 1.75vw rgba(214, 249, 249, 0.8), 0.5vw 0.5vw 1.75vw rgba(214, 249, 249, 0.8), -0.5vw 0.5vw 1.75vw rgba(214, 249, 249, 0.8); } .lamps .lamp-b-1 { bottom: 0; left: 0; } .lamps .lamp-b-2 { bottom: 0; right: 0; } .lamps .lamp-b-3 { top: 0; left: 0; } .lamps .lamp-b-4 { top: 0; right: 0; } .a1 { position: absolute; top: 0; left: 0; width: 30vw; height: 35vw; } .a1__front { width: 30vw; height: 1.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(33.5vw); } .a1__back { width: 30vw; height: 1.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-1.5vw); } .a1__right { width: 35vw; height: 1.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-35vw) translateY(-1.5vw); } .a1__left { width: 35vw; height: 1.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw); } .a1__top { width: 30vw; height: 35vw; transform-origin: top left; transform: translateZ(1.5vw); } .a1__bottom { width: 30vw; height: 35vw; transform-origin: top left; transform: rotateY(180deg) translateX(-30vw); } .a1__r1 { position: absolute; bottom: 1vw; left: -4vw; width: 33vw; height: 7vw; transform-origin: top left; transform: skewX(45deg); background-image: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.02)); border-top-left-radius: 7vw; } .a1__r2 { position: absolute; bottom: 1vw; right: -2vw; width: 6vw; height: 32vw; transform-origin: bottom right; transform: skewY(45deg); background-image: linear-gradient(to right, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.01)); } .a1__front { background-color: #9696be; overflow: hidden; } .a1__front--s1 { width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(13, 86, 70, 0.55), transparent 70%, rgba(6, 2, 27, 0.5)); } .a1__front--s2 { width: 8vw; height: 8vw; left: -1vw; bottom: -1vw; border-radius: 50%; background-image: linear-gradient(to right, rgba(158, 111, 189, 0.3), rgba(214, 249, 249, 0.5)); box-shadow: 0.5vw 0.5vw 2vw rgba(214, 249, 249, 0.2), -0.5vw 0.5vw 2vw rgba(214, 249, 249, 0.2), 0.5vw -0.5vw 2vw rgba(214, 249, 249, 0.2), -0.5vw -0.5vw 2vw rgba(214, 249, 249, 0.2); filter: blur(1vw); } .a1__front--s3, .a1__front--s4 { width: 2vw; height: 2vw; border-radius: 50%; background-color: rgba(214, 249, 249, 0.4); filter: blur(0.75vw); } .a1__front--s3 { left: -0.5vw; } .a1__front--s4 { right: -0.5vw; } .a1__back { background-color: #9696be; } .a1__right { background-color: #5a5a73; overflow: hidden; } .a1__right--s1 { width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(41, 38, 61, 0.4), rgba(158, 111, 189, 0.4) 50%); } .a1__right--s2, .a1__right--s3 { width: 2vw; height: 2vw; border-radius: 50%; background-color: rgba(214, 249, 249, 0.35); filter: blur(0.75vw); } .a1__right--s2 { left: -0.5vw; } .a1__right--s3 { right: -0.5vw; } .a1__left { background-color: #5a5a73; } .a1__top { background-color: #c8c8c8; overflow: hidden; } .a1__top--s1 { width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(13, 86, 70, 0.25), transparent 70%, rgba(158, 111, 189, 0.1)); } .a1__top--s2 { width: 24vw; height: 5vw; left: -1vw; bottom: 0; transform-origin: right; transform: skewX(-25deg); background-image: linear-gradient(to right, rgba(6, 2, 27, 0.075), rgba(6, 2, 27, 0.05)); } .a1__top--s3 { width: 20vw; height: 15vw; left: -11vw; bottom: -7vw; border-radius: 50%; background-image: linear-gradient(to right, rgba(158, 111, 189, 0.3), rgba(214, 249, 249, 0.5)); box-shadow: 0.5vw 0.5vw 2vw rgba(214, 249, 249, 0.2), -0.5vw 0.5vw 2vw rgba(214, 249, 249, 0.2), 0.5vw -0.5vw 2vw rgba(214, 249, 249, 0.2), -0.5vw -0.5vw 2vw rgba(214, 249, 249, 0.2); filter: blur(1vw); } .a1__top--s4 { right: -3vw; top: -0.5vw; width: 70%; height: 120%; border-radius: 50%; background-image: linear-gradient(to right, rgba(158, 111, 189, 0.3), rgba(0, 0, 150, 0.3)); filter: blur(1.4vw); } .a1__top .lamp-b { bottom: 4.25vw; } .a1__top .lamp-b-1 { right: 7vw; } .a1__top .lamp-b-2 { right: 9.5vw; } .a1__top .lamp-b-3 { right: 12vw; } .a1__top .lamp-b-4 { right: 14.5vw; } .a1__top .lamp-b-5 { right: 17vw; } .a1__bottom { background-color: #9696be; } .b1 { transform: translateZ(1.5vw); position: absolute; top: 0; left: 0; width: 30vw; height: 20vw; } .b1__front { width: 30vw; height: 5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(15vw); } .b1__back { width: 30vw; height: 5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-5vw); } .b1__right { width: 20vw; height: 5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-20vw) translateY(-5vw); } .b1__left { width: 20vw; height: 5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw); } .b1__top { width: 30vw; height: 20vw; transform-origin: top left; transform: translateZ(5vw); } .b1__bottom { width: 30vw; height: 20vw; transform-origin: top left; transform: rotateY(180deg) translateX(-30vw); } .b1__front { background-color: #9696be; } .b1__back { background-color: #9696be; } .b1__right { background-color: #5a5a73; overflow: hidden; } .b1__right--s1 { width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(158, 111, 189, 0.2), rgba(158, 111, 189, 0.3)); } .b1__left { background-color: #5a5a73; } .b1__top { background-color: #c8c8c8; overflow: hidden; } .b1__top--s1 { right: 3.5vw; top: -0.5vw; width: 4vw; height: 15vw; background-image: linear-gradient(to right, rgba(0, 0, 150, 0.5), rgba(0, 0, 150, 0.1)); transform: skewY(-10deg); filter: blur(0.15vw); } .b1__top--s2 { right: -3vw; top: -0.5vw; width: 70%; height: 120%; border-radius: 50%; background-image: linear-gradient(to right, rgba(158, 111, 189, 0.6), rgba(0, 0, 150, 0.45)); filter: blur(1.4vw); } .b1__top--s3 { left: -3vw; top: -0.5vw; width: 60%; height: 120%; border-radius: 50%; background-image: linear-gradient(to right, rgba(41, 38, 61, 0.7), rgba(15, 22, 36, 0.2), rgba(0, 0, 150, 0.5)); filter: blur(1.4vw); } .b1__top--s4 { width: 100%; height: 100%; background-image: linear-gradient(to right, #d7f7f7, #d7f7f7); } .b1__top--s5 { width: 24vw; height: 7vw; left: -1vw; bottom: 0; transform-origin: right; transform: skewX(-25deg); background-image: linear-gradient(to right, rgba(6, 2, 27, 0.08), rgba(6, 2, 27, 0.08)); } .b1__top .lamp-b { top: 1vw; } .b1__top .lamp-b-1 { right: 1vw; } .b1__top .lamp-b-2 { right: 5vw; } .b1__top .lamp-b-3 { top: 13vw; right: 5vw; } .b1__bottom { background-color: #9696be; } .b2 { transform: translateZ(1.5vw); position: absolute; top: 20vw; left: 0; width: 12vw; height: 10vw; } .b2__front { width: 12vw; height: 5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(5vw); } .b2__back { width: 12vw; height: 5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-5vw); } .b2__right { width: 10vw; height: 5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-10vw) translateY(-5vw); } .b2__left { width: 10vw; height: 5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw); } .b2__top { width: 12vw; height: 10vw; transform-origin: top left; transform: translateZ(5vw); } .b2__bottom { width: 12vw; height: 10vw; transform-origin: top left; transform: rotateY(180deg) translateX(-12vw); } .b2__front { background-color: #9696be; overflow: hidden; } .b2__front--s1 { width: 100%; height.........完整代码请登录后点击上方下载按钮下载查看
网友评论0