css实现图片拼图鼠标悬浮动画效果代码-html代码-BFW代码库

css实现图片拼图鼠标悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现图片拼图鼠标悬浮动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .gallery {
          --s: 200px; /* control the size */
          --r: 45px;  /* control the triangular shape */
          
          display: grid;
          gap: 6px;
          grid: auto-flow var(--s)/repeat(2,var(--s));
          cursor: pointer;
        }
        .gallery > img {
          object-fit: cover;
          transition: .5s;
        }
        .gallery > img:is(:nth-child(1),:nth-child(4)) {
          width: 100%;
          height: calc(100% + var(--r));
        }
        .gallery > img:is(:nth-child(2),:nth-child(3)) {
          height: 100%;
          width: calc(100% + var(--r));
        }
        .gallery > img:nth-child(1) {
          clip-path: polygon(0 0, 100% 0, calc(100% - var(--r)) calc(50% - var(--r)/2),100% calc(100% - var(--r)),50% 100%,0 calc(100% - var(--r)))
        }
        .gallery > img:nth-child(2) {
          place-self: end;
          clip-path: polygon(var(--r) 0,100% 0,100% 100%,calc(50% + var(--r)/2) calc(100% - var(--r)),var(--r) 100%,0 50%)
        }
        .gallery > img:nth-child(3) {
          clip-path: polygon(0 0,calc(50% - var(--r)/2) var(--r),calc(100% - var(--r)) 0,100% 50%,calc(100% - var(--r)).........完整代码请登录后点击上方下载按钮下载查看