div+css实现饼状图片悬浮放大效果代码-html代码-BFW代码库

div+css实现饼状图片悬浮放大效果代码

代码语言：html

代码描述：div+css实现饼状图片悬浮放大效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        .gallery {
            --g: 8px;
            /* the gap */
            --s: 500px;
            /* 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%.........完整代码请登录后点击上方下载按钮下载查看