css实现按钮点击图片相册依次排列弹出效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现按钮点击图片相册依次排列弹出效果代码
代码标签: css 按钮 点击 图片 相册 依次 排列 弹出
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .gallery { --s: 130px; /* control the size of the images*/ display: grid; grid-template-columns: repeat(3,auto); gap: 5px; position: relative; } .gallery input { position: absolute; border: 2px solid #000; border-radius: 50%; inset: calc(50% - var(--s)/3); cursor: pointer; --g: linear-gradient(#000 0 0) no-repeat; background: var(--g) 50%/var(--b,0%) 3px,var(--g) 50%/3px var(--b,0%); transition: 1.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .gallery > img { width: var(--s); aspect-ratio: 1; object-fit: cover; transform: scale(.1); filter: brightness(0); pointer-events: none; transform-origin: var(--x) var(--y); transition: 1s calc((var(--i) - 1)*.1s); } .gallery > img:nth-of-type(1) {--i:1;--x: 150%;--y:150%;} .gallery > img:nth-of-type(2) {--i:2;--x: 50%;--y:150%;} .gallery > img:nth-of-type(3) {--i:3;--x: -50%;--y:150%;} .gallery > img:nth-of-type(4) {--i:4;--x: 150%;--y:50%; } .gallery > img:nth-of-type(5) {--i:5 } .gallery > img:nth-of-type(6) {--i:6;--x: -50%;--y:50%; } .gallery > img:nth-of-type(7) {--i:7;--x: 150%;--y:-50%;} .gallery > img:nth-of-type(8) {--i:8;--x: 50%;--y:-50%;} .gallery > img:nth-of-type(9) {--i:9;--x: -50%;--y:-50%;} .gallery > input:checked ~ img { transform: scale(1); filter: brightness(1); pointer-events: initial; } .gallery > input:checked { transform: translateY(calc(1.75*var(--s))) scale(.5) rotate(45deg); --b: 70%; } body { margin: 0; min-height: 100vh; display: grid; place-content: center; background: #83AF9B; } </style> </head> <body> <div class="gallery&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0