div+css实现悬浮按钮点击弹出圆圈图片效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现悬浮按钮点击弹出圆圈图片效果代码
代码标签: div 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; gap: 5px; position: relative; } .gallery input { position: absolute; z-index: 1; border-radius: 50%; inset: calc(50% - var(--s)/3); cursor: pointer; --g: linear-gradient(#fff 0 0) no-repeat; background: var(--g) 50%/60% 3px,var(--g) 50%/3px 60%,#222; transition: 1.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .gallery > img { width: var(--s); aspect-ratio: 1; grid-area: 1/1; border-radius: 50%; object-fit: cover; transform: scale(.5); transition: 1s calc((var(--i) - 1)*.1s); } .gallery > img:nth-of-type(1) {--i:1;} .gallery > img:nth-of-type(2) {--i:2;} .gallery > img:nth-of-type(3) {--i:3;} .gallery > img:nth-of-type(4) {--i:4;} .gallery > img:nth-of-type(5) {--i:5;} .gallery > img:nth-of-type(6) {--i:6;} .gallery > img:nth-of-type(7) {--i:7;} .gallery > img:nth-of-type(8) {--i:8;} .gallery > img:nth-of-type(9) {--i:9;} .gallery > input:checked ~ img { transform: rotate(calc(var(--i)* 360deg/8)) translate(calc(1.5*var(--s))) rotate(calc(var(--i)*-360deg/8)); } .gallery > input:checked { transform: rotate(135deg) } body { margin: 0; min-height: 100vh; display: grid; place-content: center; background: #83AF9B; } </style> </head> <body > <div class="gallery"> <input type="c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0