div+css实现块状元素纹理效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #wrapper { overflow: hidden; height: 100vh; width: 100vw; background: linear-gradient(180deg, #73a7b7 0%, #73a7b7 25%, #45899f 75%, #45899f 100%); } #block { position: relative; width: 50vh; height: 50vh; margin: 10vh auto 0 auto; animation: drift; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .right .inner { background-color: rgba(0, 0, 0, 0.5); } .right .inner .side-0 { transform: translate(70%, 70%); } .right .inner .side-0:before { width: 100%; height: 69%; transform: skew(48deg, 0deg) translate(35%, -99%); } .right .inner .side-0:after { width: 76%; height: 100%; transform: skew(0deg, 42deg) translate(-99%, -36%); } .right .inner .side-1 { transform: translate(35%, 35%); } .right .inner .side-1:before { width: 100%; height: 69%; transform: skew(48deg, 0deg) translate(35%, -99%); } .right .inner .side-1:after { width: 36%; height: 100%; transform: skew(0deg, 42deg) translate(-99%, -50%); } .right .inner .side-2 { transform: translate(0%, 0%); } .right .inner .side-2:before, .right .inner .side-2:after { display: none; } .right .inner .side-3 { opacity: 0; } .right .inner .side-3:before, .right .inner .side-3:after { display: none; } .left .inner .side-0 { transform: translate(-70%, 70%); } .left .inner .side-0:before { width: 100%; height: 69%; transform: skew(-48deg, 0deg) translate(-35%, -99%); } .left .inner .side-0:after { width: 76%; height: 100%; transform: skew(0deg, -42deg) translate(133%, -15%); } .left .inner .side-1 { transform: translate(-35%, 35%); } .left .inner .side-1:before { width: 100%; height: 69%; transform: skew(-48deg, 0deg) translate(-35%, -99%); } .left .inner .side-1:after { width: 76%; height: 100%; transform: skew(0deg, -42deg) translate(133%, -15%); } .left .inner .side-2 { transform: translate(0%, 0%); } .left .inner .side-2:before, .left .inner .side-2:after { display: none; } .left .inner .side-3 { opacity: 0; } .left .inner .side-3:before, .left .inner .side-3:after { display: none; } .face { width: 50%; height: 50%; position: absolute; background-color: #68432d; } .face .side { position: absolute; width: 100%; height: 100%; } .face .side .inner { width: 100%; height: 100%; position: relative; } .face .side .inner .pixel { position: relative; } .face .side .inner .pixel:before, .face .side .inner .pixel:after { content: ''; display: block; } .face.top { background-color: #022d06; width: 52%; height: 52%; transform: rotate(135deg) skew(20deg, 20deg); left: 24%; top: 12.4%; } .face.top:after { content: ''; display: block; width: 100%; height: 100%; transform: translate(190%, -190%); position: absolute; background-color: rgba(0, 0, 0, 0.4); filter: blur(20px); animation: shadow; animation-duration: 2s; border-radius: 20%; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .face.top .pixel { width: 10%; height: 10%; position: relative; } .face.top .pixel:before, .face.top .pixel:after { content: ''; } .face.top .pixel.lvl-0:before, .face.top .pixel.lvl-0:after { display: none; } .face.top .pixel.lvl-1 { transform: translate(-70%, 70%); } .face.top .pixel.lvl-1:before { display: block; width: 70%; height: 107.9%; transform: rotate(45deg) skew(0deg, -45deg) translate(-38%, -120%); } .face.top .pixel.lvl-1:after { display: block; width: 112%; height: 69%; transform: rotate(-45deg) skew(-45deg, 0deg) translate(105%, -50%); } .face.top .pixel.lvl-2 { transform: translate(-40%, 40%); } .face.top .pixel.lvl-2:before { display: block; width: 70%; height: 58%; transform: rotate(45deg) skew(0deg, -45deg) translate(-13%, -118%); } .face.top .pixel.lvl-2:after { display: block; width: 58%; height: 70%; transform: rotate(-45deg) skew(-45deg, 0deg) translate(222%, 33%); bottom: 0; left: 0; } .face.left { transform: rotate(0deg) skew(0deg, 25deg); left: 0; bottom: 0; } .face.right { transform: rotate(0deg) skew(0deg, -25deg); right: 0; bottom: 0; } .pixel { width: 10%; height: 10%; float: left; } .pixel.dirt-0 { background: linear-gradient(90deg, #bb8658 0%, #b17948 100%); } .pixel { width: 10%; height: 10%; float: left; } .pixel.dirt-1 { background: linear-gradient(90deg, #9b6b46 0%, #895f3e 100%); } .pixel { width: 10%; height: 10%; float: left; } .pixel.dirt-2 { background: linear-gradient(90deg, #b57d4f 0%, #a57145 100%); } .pixel { width: 10%; height: 10%; float: left; } .pixel.dirt-3 { background: linear-gradient(90deg, #8c5a3c 0%, #7a4f34 100%); } .grass-0 { background: linear-gradient(90deg, #01510a 0%, #016a0d 100%); } .grass-0:before { background: linear-gradient(90deg, #013707 0%, #001e04 100%); } .grass-0:after { background: linear-gradient(90deg, #013707 0%, #001e04 100%); } .grass-1 { background: linear-gradient(90deg, #03650c 0%, #047e0f 100%); } .grass-1:before { background: linear-gradient(90deg, #024d09 0%, #023406 100%); } .grass-1:after { background: linear-gradient(90deg, #024d09 0%, #023406 100%); } .grass-2 { background: linear-gradient(90deg, #078f15 0%, #08a718 100%); } .grass-2:before { background: linear-gradient(90deg, #067611 0%, #055e0e 100%); } .grass-2:after { background: linear-gradient(90deg, #067611 0%, #055e0e 100%); } .grass-3 { background: linear-gradient(90deg, #05770f 0%, #068f12 100%); } .grass-3:before { background: linear-gradient(90deg, #045e0c 0%, #034609 100%); } .grass-3:after { background: linear-gradient(90deg, #045e0c 0%, #034609 100%); } @keyframes drift { from { transform: translateY(-3%); } to { transform: translateY(3%); } } @keyframes shadow { from { transform: translate(220%, -220%) scale(0.6); } to { transform: translate(205%, -205%) scale(0.8); } } </style> </head> <body translate="no"> <div id="wrapper" style="display:grid;"> <div id="block"> <div class="face right"> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-1"></div> <div class="pixel dirt-2"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-3"></div> <div class="pixel dirt-0"></div> <div class="pixel dirt-2"></div> <div class="side"> <div class="inner"> <div class="pixel grass-0 side-2 grass-3"></div> <div class="pixel grass-1 side-1 grass-3"></div> <div class="pixel grass-3 side-1 grass-3"></div> <div class="pixel grass-0 side-2 grass-2"></div> <div class="pixel grass-3 side-2 grass-1"></div> <div class="pixel grass-3 side-1 grass-0"></div> <div class="pixel grass-3 side-2 grass-0"></div> <div class="pixel grass-3 side-0 grass-2"></div> <div class="pixel grass-2 side-2 grass-3"></div> <div class="pixel grass-2 side-0 grass-1"></div> <div class="pixel grass-3 side-2 grass-0"></div> <div class="pixel grass-3 side-2 grass-1"></div> <div class="pixel grass-3 side-0 grass-1"></div> <div class="pixel grass-2 side-1 grass-3"></div> <div class="pixel grass-0 side-1 grass-1"></div> <div class="pixel grass-0 side-0 grass-3"></div> <div class="pixel grass-3 side-0 grass-0"></div> <div class="pixel grass-3 side-1 grass-1"></div> <div class="pixel grass-0 side-2 grass-1"></div> <div class="pixel grass-0 side-0 grass-1"></div> <div class="pixel grass-2 side-2 grass-1"></div> <div class="pixel grass-2 side-3 grass-2"></div> <div class="pixel grass-0 side-3 grass-3"></div> <div class="pixel grass-2 side-1 grass-0"></div> <div class="pixel grass-0 side-3 grass-2"></div> <div class="pixel grass-0 side-0 grass-1"></div> <div class="pixel grass-1 side-1 grass-1"></div> <div class="pixel grass-0 side-1 grass-0"></div> <div class="pixel grass-0 side-1 grass-3"></div> <div class="pixel grass-1 side-1 grass-1"></div> <div class="pixel grass-3 side-2 grass-1"></div> <div class="pixel grass-1 side-1 grass-1"></div> <div class="pixel grass-0 side-0 grass-1"></div> <div class="pixel grass-1 side-3 grass-3"></div> <div class="pixel grass-1 side-0 grass-1"></div> <div class="pixel grass-3 side-1 grass-1"></div> <div class="pixel grass-2 side-2 grass-1"></div> <div class="pixel grass-1 side-2 grass-0"></div> <div class="pixel grass-1 side-0 grass-2"></div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0