css实现两队成员人物vs对战对比鼠标悬浮缩放效果代码-html代码-BFW代码库

css实现两队成员人物vs对战对比鼠标悬浮缩放效果代码

代码语言：html

代码描述：css实现两队成员人物vs对战对比鼠标悬浮缩放效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
.gallery {
  --z: 32px;  /* control the zig-zag  */
  --s: 400px; /* control the size */
  --g: 8px;   /* control the gap */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  grid-auto-flow: column;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--z)/2);
  height: var(--s);
  object-fit: cover;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: calc(var(--s)/2);
}
.gallery > img:first-child {
  place-self: start;
  clip-path: polygon(calc(2*var(--z)) 0,100% 0,100% 100%,0 100%);
  --mask: 
    linear-gradient(#000 0 0) left/calc(100% - var(--z)) 100% no-repeat,
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 
      100% 50%/var(--z) calc(2*var(--z)) repeat-y;
}
.gallery > img:last-child {
  place-self: end;
  clip-path: polygon(0 0.........完整代码请登录后点击上方下载按钮下载查看