css鼠标移上图片折叠效果如何做？

发布时间：2023-07-27 13:59:02 所属栏目：语言来源：

导读：今天给大家分享用CSS实现一个比较酷炫有趣的效果，就是css鼠标移上图片折叠效果，实现效果、思路以及实现代码如下，对新手学习CSS动画效果的实现有一定的帮助，感兴趣的朋友可以了解看看。

1. 实现要点

今天给大家分享用CSS实现一个比较酷炫有趣的效果，就是css鼠标移上图片折叠效果，实现效果、思路以及实现代码如下，对新手学习CSS动画效果的实现有一定的帮助，感兴趣的朋友可以了解看看。

    1. 实现要点

折叠是由多个块级元素来完成的;

图片是以背景图片的方式呈现出来的;

给每个块级元素设置同一张背景图片，通过background-position来控制显示的区域（类似于雪碧图）;

通过ransform属性来实现折叠效果;

整个包裹div的大小就是图片的原大小，如果更改了尺寸，需要调整background-size等属性调整背景图片大小

    2. 源码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>hover-folder</title>

  <style>

    html,

    body,

    ul,

    li {

      margin: 0;

      padding: 0

    }

    ul {

      list-style: none;

      display: block;

    }

    body {

      width: 100%;

      height: 100vh;

    }

    .container {

      width: 100%;

      height: 100%;

      /* background-color: aqua; */

      display: flex;

      justify-content: center;

      align-items: center;

      transform: scale(0.5);

    }

    .wrap {

      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);

      width: 1280px;

      height: 854px;

      font-size: 0;

      line-height: 0;

      position: relative;

    }

    .image {

      cursor: pointer;

    }

    .abs-wrap {

      height: 100%;

      width: 100%;

      /* top: 0;

      left: 0; */

      /* position: absolute; */

      z-index: 10;

    }

    .abs-wrap:hover>.abs:nth-child(2) {

      transform: matrix(0.8, -0.2, 0, 1, -1, 0);

    }

    .abs-wrap:hover>.abs:nth-child(3) {

      transform: matrix(0.8, 0.2, 0, 1, -53, -50);

    }

    .abs-wrap:hover>.abs:nth-child(4) {

      transform: matrix(0.8, -0.2, 0, 1, -105, 0);

    }

    .abs-wrap:hover>.abs:nth-child(5) {

      transform: matrix(0.8, 0.2, 0, 1, -157, -50);

    }

    .abs {

      transform-style: preserve-3d;

      transform-origin: left center;

      transition: .4s ease-in-out;

      width: 20%;

      height: 100%;

      /* background-color: rgba(0, 0, 0, .5); */

      display: inline-block;

      background-size: 100%;

      background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604e

        cb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D8

        6%26f%3DJPEG%3Fw%3D1280%26h%3D854');

    }

    .abs:nth-child(1) {

      background-position: 0% 0%;

    }

    .abs:nth-child(2) {

      background-position: 25% 0%;

    }

    .abs:nth-child(3) {

      background-position: 50% 0%;

    }

    .abs:nth-child(4) {

      background-position: 75% 0%;

    }

    .abs:nth-child(5) {

      background-position: 100% 0%;

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="wrap">

      <ul class="abs-wrap">

        <li class="abs"></li>

        <li class="abs"></li>

        <li class="abs"></li>

        <li class="abs"></li>

        <li class="abs"></li>

      </ul>

    </div>

  </div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!