div+css利用has实现可折叠相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css利用has实现可折叠相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Della+Respira&family=Golos+Text:wght@400..900&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; width: 100vw; min-height: 100vh; background-color: black; font: normal normal 400 12pt / 2cap "Golos Text", sans-serif; color: white; overflow-x: hidden; } article { width: 100%; max-width: 1265px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; margin: 50px 0; } figure { width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; margin: 0 0 30px 0; } figure figcaption { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; } figure figcaption h1 { font: normal normal 400 240% / 1.5cap "Della Respira", serif; padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 1px solid #333; text-wrap: balance; } figure figcaption p { color: #bbb; padding-left: 30px; margin: 0; border-left: 10px solid; border-image: repeating-linear-gradient( 43deg, white, white 4px, transparent 5px, transparent 9px, white 10px ) 10; text-wrap: pretty; } figure figcaption p span:last-of-type { display: none; } button { font: normal normal 400 12pt / 2cap "Golos Text", sans-serif; width: 200px; height: 50px; background-color: transparent; border: 1px solid #666; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; } button::after { position: absolute; right: 100%; top: 0; width: 100%; height: 100%; background-color: #ccc; content: ""; z-index: -1; transition: all 0.3s ease; } button:hover::after { right: 0; transition: all 0.3s ease; } button input { display: none; } button label { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; transition: all 0.3s ease; } button:hover label { color: black; transition: all 0.3s ease; } button label span { display: none; } button:not(:has(input:checked)) label span:first-of-type { display: initial; } button:has(input:checked) label span:last-of-type { display: initial; } section { width: 100%; height: 0; display: flex; flex-direction: row; align-items: stretch; justify-content: stretch; border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; transition: all 0.5s ease; position: relative; } section::before { position: absolute; top: 0; right: 0; width: 100%; height: 2px; background-image: linear-gradient( 90deg, #ff00bb, #ff00b6, #ff00a8, #ff0b93, #ff347a, #ff585f, #ff7a44, #ff9829, #ffb20c, #ffc500, #ffd100, #ffd500 ); content: ""; z-index: 2; transition: all 1.2s ease; } figure:has(button input:checked) ~ section::before { width: 0px; transition: all 1.2s ease; } div { flex-grow: 1; opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; transition: all 0.4s ease; } figure:has(button input:checked) ~ section { height: 220px; transition: all 0.5s ease; } figure:has(button input:checked) ~ section div, figure:has(button input:checked) ~ section div + div + div + div + div + div + div + div + div + div + div { opacity: 1; flex-grow: 2; transition-delay: 0.15s; } figure:has(button input:checked) ~ section div + div, figure:has(button input:checked) ~ section div + div + div + div + div + div + div + div + div + div { opacity: 1; transition-delay: 0.3s; fl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0