HTMLElement实现图片相册点击放大效果代码-html代码-BFW代码库

HTMLElement实现图片相册点击放大效果代码

代码语言：html

代码描述：HTMLElement实现图片相册点击放大效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
<style>
html:has(dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
}

main {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  grid-template-columns: 1fr 1fr;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: 1rem;
}

lightbox-image:defined {
  display: block;
  cursor: zoom-in;
}

lightbox-image {
  max-width: 250px;
}

dialog {
  --_gutter: 2rem;
  padding: 1rem;
  outline: unset;
  border: unset;
  background: unset;
  max-height: 100vh;
  cursor: zoom-out;

  &::-webkit-backdrop {
    background: blue;
    opacity: 0.75;
  }

  &::backdrop {
    background: blue;
    opacity: 0.75;
  }

  form {
    position: absolute;
    opacity: 0;
  }

  img {
    max-height: calc(100vh - var(--_gutter));
  }
}

::view-transition-group(active-lightbox-image) {
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
</style>

  
  
</head>

<body translate="no">
  <main>
  <lightbox-image dialog-id="lightbox">
    <img src='//repo.bfw.wiki/random/300x600/景色' alt=''>
  </lightbox-image>

  .........完整代码请登录后点击上方下载按钮下载查看