scss布局吊扇旋转的三维立体房间效果代码
代码语言:html
所属分类:布局界面
代码描述:scss布局吊扇旋转的三维立体房间效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style type = 'text/scss'> // @import "setup"; $wall: #889199; $white: #fff; $none: rgba(#fff, 0); $wood: #826851; $blk: #211f1d; $win: lighten($wall, 20); html { /* font-size: 1vw;*/ } html, body { height: 100%; margin: 0; } div { transform-style: preserve-3d; perspective: 100rem; position: relative; *, *:before, *:after, &:after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; transform-style: preserve-3d; /* backface-visibility: hidden;*/ } } div, room, wall { width: 100%; height: 100%; } room { transform: translateZ(-50rem) rotateY(0deg); } wall { background: radial-gradient($wall, darken($wall, 20)); width: 100rem; box-shadow: inset 0 0 2rem darken($wall, 20); border: 2px solid darken($wall, 20); //skirting board &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(5) { &:after, &:before { width: 100%; height: 1.5rem; background: radial-gradient(circle, lighten($wall, 5), darken($wall, 5)); top: auto; bottom: 0; transform: translate3d(0, 0, 0.25rem); box-shadow: inset 0 0 0.5rem darken($wall, 20); } &:before { transform: translate3d(0, -0.75rem, -0.5rem) rotateX(90deg); background: lighten($wall, 5); } } //left &:nth-of-type(1) { transform: translateX(-50%) rotateY(90deg); background: none; //window & > u { width: 100%; height: calc(100% - 39rem); height: 13%; background: radial-gradient($wall, darken($wall, 20)); background-size: 100% calc(100% + 39rem); background-size: 100% 700%; &:before { width: 100%; height: 10rem; background: radial-gradient(at top, $wall, lighten($wall, 10)); transform: translate3d(0, 5rem, -5rem) rotateX(90deg); top: auto; bottom: 0; box-shadow: inset 0 2.5rem 1rem rgba($blk, 0.5); } } & > u:nth-of-type(2) { width: calc(100% - 85rem); width: 25%; height: 100%; background-size: calc(100% + 85rem) 100%; background-size: 400% 100%; } & > u:nth-of-type(3) { width: calc(100% - 75rem); width: 25%; height: 100%; right: 0; left: auto; background-size: calc(100% + 75rem) 100%; background-size: 400% 100%; transform: scaleX(-1); &:before { transform: rotateY(-90deg); width: 9rem; height: 100%; background: radial-gradient( at right, lighten($wall, 5), lighten($wall, 10) ); left: 63%; transform-origin: 100% 0; box-shadow: inset 1rem 0 1rem rgba($blk, 0.5); } } //w bottom & > u:nth-of-type(4) { top: auto; bottom: 0; height: calc(100% - 33rem); height: 27%; background-size: 100% calc(100% + 33rem); background-size: 100% 400%; transform: scaleY(-1); &:before { transform: translate3d(0, 5rem, -5rem) rotateX(90deg); background: radial-gradient( at right, lighten($wall, 15), lighten($wall, 20) ); } } } //right &:nth-of-type(2) { transform: translateX(50%) rotateY(-90deg); left: auto; right: 0; } //top &:nth-of-type(3) { transform: rotateX(-90deg) translate3d(-1rem, 0, -50rem); width: calc(100% + 2rem); height: 100rem; background: radial-gradient(lighten($wall, 5), darken($wall, 10)); } //bottom &:nth-of-type(4) { transform: rotateX(90deg) translate3d(0, 0, -50rem); top: auto; bottom: 0; width: 100%; height: 100rem; background: repeating-linear-gradient( to right, $none, $none 2rem, rgba(darken($wood, 10), 0.5) 2.2rem ), // radial-gradient($wood, darken($wood, 20)); box-shadow: inset 0 1rem 2rem rgba(lighten($wall, 10), 0.5); } &:nth-of-type(5) { transform: translateZ(-49rem); width: 100%; } } // @import "light"; light { right: 0; margin: auto; transform: rotateX(-90deg) translate3d(0, 0, 0) scale(0.7); transform-origin: 0 0; box-shadow: 2rem 0 1rem rgba($blk, 0.25), // 5rem 0 3rem rgba($blk, 0.1), // 10rem 0 3rem rgba($blk, 0.1), // 15rem 0 5rem rgba($blk, 0.1); &, &:before, &:after, & > u:nth-of-type(1), & > u:nth-of-type(1):after, & > u:nth-of-type(2), & > u:nth-of-type(2):before, & > u:nth-of-type(2):after, & > u:nth-of-type(3), & > u:nth-of-type(3):before, & > u:nth-of-type(3):after, & > u:nth-of-type(4), & > u:nth-of-type(4):before { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(90deg, $blk, $wall, $white, $blk, $wall, $blk); } &:after { transform: translate3d(0, 0, 0.3rem) scale(0.7); } &:before { transform: translate3d(0, 0, 0.2rem); background: lighten($blk, 10); } & > u:nth-of-type(1) { transform: translate3d(0, 0, 0.5rem) scale(0.7); background: lighten($blk, 10); &:before { transform: translate3d(0, 0, 5rem); transform: translateZ(-5rem); background: linear-gradient(90deg, $blk, $wall, $wall, $blk, $wall, $blk); height: 10rem; width: 1rem; transform: rotateX(90deg) translate3d(0, 0, 2rem); right: 0; margin: auto; } &:after { transform: translate3d(0, 0, 2rem) scale(0.7); background: lighten($blk, 10); } } & > u:nth-of-type(2) { transform: translate3d(0, 0, 2.9rem); &:before { transform: translate3d(0, 0, 0.25rem); background: lighten($blk, 10); } &:after { transform: translate3d(0, 0, 0.5rem) scale(0.8); } } & > u:nth-of-type(3).........完整代码请登录后点击上方下载按钮下载查看
网友评论0