css实现背景网格切分自适应布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现背景网格切分自适应布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --gap: 8px; } body { margin: 0; font-family: system-ui; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: var(--gap); height: 100vh; position: relative; background: #080b11; display: -ms-grid; -ms-grid-columns: 1fr [4]; } .grid div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: calc(var(--gap) * 1.5); min-height: 160px; color: #fff; font-size: 1.1rem; font-weight: 600; background-color: teal; background-image: url("//repo.bfw.wiki/bfwrepo/image/606b00de3c24b.png"); background-attachment: fixed; background-size: cover; background-position: center; position: relative; cursor: pointer; overflow: hidden; transition-property: filter, backdrop-filter, opacity, color; transition-duration: 0.3s; transition-timing-function: ease-out; display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter; transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; } .grid div:hover { color: #fff; } .grid div span:first-of-type { z-index: 2; } .grid div .overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8)); backdrop-filter: blur(6px); transition-property: opacity; transition-duration: 0.4s; transition-timing-function: ease-out; z-index: -1; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8)); -webkit-backdrop-filter: blur(6px); -webkit-transition-property: opacity; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; } .grid div .shop { display: block; color: tomato; font-size: 0.8rem; font-weight: 400; margin-top: 8px; margin-bottom: -25px; opacity: 0; transition-property: margin-bottom, opacity; transition-duration: 0.3s; transition-timing-function: ethiopic-halehame-om-et; z-index: 2; -webkit-transition-property: margin-bottom, opacity; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ethiopic-halehame-om-et; } .g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0