css实现扇形图片拼凑悬浮变成全圆效果代码-html代码-BFW代码库

css实现扇形图片拼凑悬浮变成全圆效果代码

代码语言：html

所属分类：悬停

代码描述：css实现扇形图片拼凑悬浮变成全圆效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .gallery {
          --g: 8px;   /* the gap */
          --s: 400px; /* the size */
          
          display: grid;
          border-radius: 50%;
        }
        .gallery > img {
          grid-area: 1/1;
          width: var(--s);
          aspect-ratio: 1;
          object-fit: cover;
          border-radius: 50%;
          transform: translate(var(--_x,0),var(--_y,0));
          cursor: pointer;
          font-size: 0;
          z-index: 0;
          transition: .3s, z-index 0s .3s;
        }
        .gallery img:hover {
          font-size: var(--s);
          z-index: 1;
          transition: transform .2s, font-size .3s .2s, z-index 0s;
        }
        .gallery:hover img {
          transform: translate(0,0);
        }
        .gallery > img:nth-child(1) {
          clip-path: polygon(50% 50%,.5em 1.2em,0 1em,0 0,100% 0,100% 1em,calc(100% - .5em) 1.2em);
          --_y: calc(-1*var(--g))
        }
        .gallery > img:nth-child(2) {
          clip-path: polygon(50% 50%,calc(100% - 1.2em) 0.5em,calc(100% - 1em) 0,100% 0,100% 100%,calc(100% - 1em) 100%,calc(100% - 1.2em) calc(100% - .5em));
          --_x: var(--g)
        }
        .gallery > img:nth-child(3) {
          clip-path: polygon(50% 50%,calc(100.........完整代码请登录后点击上方下载按钮下载查看