css实现图片堆叠排列鼠标悬浮放大效果代码-html代码-BFW代码库

css实现图片堆叠排列鼠标悬浮放大效果代码

代码语言：html

代码描述：css实现图片堆叠排列鼠标悬浮放大效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        p {
          height: 200px;
          width: 500px;
          margin: 100px auto;
          position: relative;
        }
        
        img {
          height: 100px;
          position: absolute;
          left:0;
          offset-path: path('m 0 50 q 50-30 100-30 t 100 30 100 0 100-30 100 30');
          box-shadow: 1px 1px 3px #0008;
          transition: transform .4s ease-out, box-shadow .3s, z-index .3s;
          z-index: 0;
        }
        
        img:hover {
          transform: scale(2) rotate(1turn);
          offset-rotate: 0deg;
          box-shadow: 3px 4px 10px #0006; 
          z-index: 999;
        }
        
        /* 3 images */
        img:nth-last-child(3):first-child {
          offset-distance: 17%;
        }
        img:nth-last-child(2):nth-child(2) {
          offset-distance: 49%;
        }
        img:last-child:nth-child(3) {
          offset-distance: 81%;
        }
        
        /* 4 images */
        img:nth-last-child(4):first-child {
          offset-distance: 10%;
        }
        img:nth-last-child(3):nth-child(2) {
          offset-distance: 35%;
        }
        img:nth-last-child(2):nth-child(3) {
          offset-distance: 65%;
        }
        img:last-child:nth-child(4) {
          offset-distance: 90%;
        }
        
        /* 5 images */
        img:nth-last-child(5):first-child {
          offset-distance: 0%;
        }
        img:nth-last-child(4):nth-child(2) {
          offset-distance: 25%;
        }
        img:nth-last-child(3):nth-child(3) {
          offset-distance: 51%;
        }
        img:nth-last-child(2):nth-child(4) {
          offset-distance: 75%;
        }
        img:last-child:nth-child(5) {
          offset-distance: 100%;
        }
    </style>



</head>

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