splitting实现图片排列悬浮分割放大效果代码-html代码-BFW代码库

splitting实现图片排列悬浮分割放大效果代码

代码语言：html

代码描述：splitting实现图片排列悬浮分割放大效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">
    <style>
        .tiler {
          display: inline-block;
          cursor: pointer;
          visibility: hidden;
          width: 33.3%;
          margin: auto;
        }
        
        .tiler img {
          display: block;
          margin: auto;
          max-width: 100%;
          visibility: visible;
        }
        
        .tiler .cell-grid {
          background-position: center center;
          margin: auto;
          position: fixed;
          top: 1em;
          bottom: 1em;
          left: 1em;
          right: 1em;
          z-index: 10;
          max-width: 1000px;
          max-height: 600px;
          perspective: 30px;
        }
        
        .tiler .cell {
          pointer-events: none;
          opacity: 0;
          transform: translateZ(-15px);
          transform-style: preserve-3d;
          transition-property: transform, opacity;
          transition-duration: 0.5s, 0.4s;
          transition-timing-function: cubic-bezier(0.65, 0.01, 0.15, 1.33);
          /* The center character index */
          --center-x: calc((var(--col-total) - 1) / 2);
          --center-y: calc((var(--row-total) - 1) / 2);
          /* Offset from center, positive & negative */
          --offset-x: calc(var(--col-index) - var(--center-x));
          --offset-y: calc(var(--row-index) - var(--center-y));
          /* Absolute distance from center, only positive */
          --distance-x: calc(
            (var(--offset-x) * var(--offset-x)) / var(--center-x)
          );
          /* Absolute distance from center, only positive */
          --distance-y: calc(
            (var(--offset-y) * var(--offset-y)) / var(--center-y)
          );
          transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) );
        }
        
        .til.........完整代码请登录后点击上方下载按钮下载查看