css+js实现图片相册分类筛选效果代码
代码语言:html
所属分类:画廊相册
代码描述:css+js实现图片相册分类筛选效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Gochi+Hand&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap"/> <style> @layer reset, base, layout, transitions; @layer transitions { @-webkit-keyframes scale-out { to { scale: 0; } } @keyframes scale-out { to { scale: 0; } } @-webkit-keyframes fade-in { to { opacity: 1; } } @keyframes fade-in { to { opacity: 1; } } :root { view-transition-name: none; } ::view-transition { pointer-events: none; } } @layer layout { body { gird-template-rows: min-content minmax(0, 1fr); } .nav { display: flex; padding: 1rem; background: #333; gap: 1rem; align-items: center; justify-content: center; border-bottom: 1px dashed #665e5e; box-shadow: 0 1px 0 0 #0c0a0a; & li { padding: 0.2em 0.5em; border: 2px dashed transparent; border-radius: 50%; border-radius: 4px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; transition: all 0.2s linear; &:hover, &.active { border-color: #09f; color: #09f; } } } .gallery { padding: 1rem; display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100% - 2rem, 280px), 1fr) ); gap: 1rem; grid-auto-flow: dense; & figure { aspect-ratio: 4 / 3; border-radius: 10px; background: #18141b; box-shadow: rgb(0 0 0 / 0.24) 0px 3px 8px; position: relative; &.active { grid-area: span 2 / span 2; } } & img { position: absolute; inset: 0; border-radius: 10px; width: 100%; height: 100%; } } } @layer reset { * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none outside none; } img { display: block; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } } @layer base { body { width: 100vw; min-height: 100vh; font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif; background-color: #110d14; color: #fff; display: grid; align-content: start; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { -webkit-animation-delay: -1ms !important; animation-delay: -1ms !important; -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } } } </style> </head> <body > <ul class="nav"> <li class="active" id="all">All Images</li> <li id="newYork" class="js-newyourk">New York City</li> <li id="flowers" class="js-">Flowers</li> <li id="others">Others</li> </ul> <div class="gallery"> <figure class="gallery--item flowers" style="--index: 1;"> <img src="//repo.bfw.wiki/bfwrepo/image/643b6bfced8e4.png" alt="flowers"> </figure> <figure class="gallery--item flowers" style="--index: 2;"><img src="//repo.bfw.wiki/bfwrepo/image/64250f76c7994.png" alt="flowers"></figure> <figure class="gallery--item newYork" style="--index: 3;"><img src="//repo.bfw.wiki/bfwrepo/image/638dbbf218d73.png" alt="newYork"></figure> <figure class="gallery--item flowers" style="--index: 4;"><img src="//repo.bfw.wiki/bfwrepo/image/639521ce1d42f.png" alt="flowers"></figure> <figure class="gallery--item newYork" style="--index: 5;"><img src="//repo.bfw.wiki/bfwrepo/image/63952232a0ac3.png" alt="newYork"></figure> <figure class="gallery--item newYork" style="--index: 6;"><img src="//repo.bfw.wiki/bfwrepo/image/639a98d5110dd.png" alt="newYork"></figure> <figure class="gallery--item newYork" style="--index: 7.........完整代码请登录后点击上方下载按钮下载查看
网友评论0