div+css实现艺术作品展示画廊效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css实现艺术作品展示画廊效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&display=swap'); html { --s: 40px; --c: hsla(336, 40%, 24%, .125); --_g: #0000 calc(-650%/13) calc(50%/13),var(--c) 0 calc(100%/13), #0000 0 calc(150%/13),var(--c) 0 calc(200%/13), #0000 0 calc(250%/13),var(--c) 0 calc(300%/13); --_g0: repeating-linear-gradient( 45deg,var(--_g)); --_g1: repeating-linear-gradient(-45deg,var(--_g)); background: var(--_g0),var(--_g0) var(--s) var(--s), var(--_g1),var(--_g1) var(--s) var(--s) hsla(350, 65%, 46%, .125); background-size: calc(2*var(--s)) calc(2*var(--s)); } body { display: grid; gap: 2ch; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); place-content: center; margin: 2cqi 4cqi; } figure { --bdc: #D39E85; all: unset; align-self: start; background-color: var(--bg, #FFF); border: 10px ridge var(--bdc); box-shadow: 0px 2.5em 1.25em -1.25em rgba(0, 0, 0, 0.2); container-type: inline-size; display: grid; gap: var(--gap, 0); grid-template-columns: repeat(var(--gtc, 5), 1fr); padding: var(--p, 6cqi 3cqi 1cqi 3cqi); place-content: start; } figcaption { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.5cqi; grid-column: 1 / calc(var(--gtc, 5) + 1); margin-block: var(--hmb, 10cqi 20cqi); text-align: center; } h2 { align-items: center; display: flex; font-family: 'Jost', sans-serif; font-size: var(--hfz, 3cqi); gap: var(--hgap, 1cqi); justify-content: center; letter-spacing: -0.02em; margin: 0; & span { color: #C95128; } } b { aspect-ratio: var(--asr, 1 / 1); background-color: var(--bg, transparent); display: grid; place-content: center; } i { aspect-ratio: 1 / 1; background-color: var(--c); border-radius: 50%; width: 4cqi; } b:not(:has(i)):nth-of-type(2n+3) { filter: url(#squiggle); } </style> </head> <body > <figure> <b style="--bg:#A0262A;"></b> <b style="--bg:#7C6E2E;"></b> <b style="--bg:#C586B2;"></b> <b style="--bg:#7B6D2C;"></b> <b style="--bg:#D5E7E3;"></b> <b style="--bg:#E6EDEA;"></b> <b style="--bg:#B57D33;"></b> <b style="--bg:#E8F0EC;"></b> <b style="--bg:#7F6626;"></b> <b style="--bg:#ECF1ED;"></b> <b style="--bg:#A12728;"></b> <b style="--bg:#C19739;"></b> <b style="--bg:#C98BB3;"></b> <b style="--bg:#C19A3A;"></b> <b style="--bg:#D5E9E6;"></b> <b style="--bg:#13366A;"></b> <b style="--bg:#B68234;"></b> <b style="--bg:#13366A;"></b> <b style="--bg:#836B28;"></b> <b style="--bg:#143869;"></b> <b style="--bg:#A5282B;"></b> <b style="--bg:#090B0F;"></b> <b style="--bg:#CC8CB4;"></b> <b style="--bg:#08090D;"></b> <b style="--bg:#D8EAE5;"></b> <figcaption> <h2>POUL GERNES</h2> <p>Untitled 1966—67<br>From a series of 36 works</p> </figcaption> </figure> <figure style="--bdc:#050505;"> <b style="--bg:#514F5F;"></b> <b style="--bg:#787683;"></b> <b style="--bg:#B6B3C7;"></b> <b style="--bg:#797784;"></b> <b style="--bg:#434645;"></b> <b style="--bg:#9BA7C8;"></b> <b style="--bg:#898098;"></b> <b style="--bg:#95A1C0;"></b> <b style="--bg:#3D413F;"></b> <b style="--bg:#919EBA;"></b> <b style="--bg:#555363;"></b> <b style="--bg:#525659;"></b> <b style="--bg:#BBB4CB;"></b> <b style="--bg:#4C5153;"></b> <b style="--bg:#434645;"></b> <b style="--bg:#FFFFFF;"></b> <b style="--bg:#908AA1;"></b> <b style="--bg:#FFFFFF;"></b> <b style="--bg:#3C4240;"></b> <b style="--bg:#FFFFFF;"></b> <b style="--bg:#525060;"></b> <b style="--bg:#6C6A79;"></b> <b style="--bg:#B9B2CA;"></b> <b style="--bg:#6B687A;"></b> <b style="--bg:#444746;"></b> <figcaption> <h2>POUL GERNES</h2> <p>Untitled 1966—67<br>From a series of 36 works</p> </figcaption> </figure> <figure style="--bdc:#7f5f50;"> <b style="--bg:#D4AD61;"></b> <b style="--bg:#59240E;"></b> <b style="--bg:#F6DAB2;"></b> <b style="--bg:#5A250E;"></b> <b style="--bg:#F0E2C3;"></b> <b style="--bg:#F4F2ED;"></b> <b style="--bg:#441215;"></b> <b style="--bg:#F5F3EF;"></b> <b style="--bg:#2B0F16;"></b> <b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0