css实现悬浮卡片堆叠相册效果代码-html代码-BFW代码库

css实现悬浮卡片堆叠相册效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮卡片堆叠相册效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content:center;
            align-items: center;
            min-height: 100vh;
            background: #212121;
            font-family: sans-serif;
          }
          .box{
            width: 1200px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            grid-gap: 15px;
            margin: 0 auto;
          }
          .card{
            position: relative;
            width: 300px;
            height: 350px;
            background: #fff;
            margin: 0 auto;
            border-radius: 4px;
            box-shadow:0 2px 10px rgba(0,0,0,.2);
          }
          .card:before,
          .card:after
          {
            content:"";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background: #fff;
            transition: 0.5s;
            z-index:-1;
          }
          .card:hover:before{
          transform: rotate(20deg);
          box-shadow: 0 2px 20px rgba(0,0,0,.2);
          }
          .card:hover:after{
          transform: rotate(10deg);
          box-shadow: 0 2px 20px rgba(0,0,0,.2);
          }
          .card .imgBx{
          position: absolute;
          top: 10px;
          left: 10px;
          bottom: 10px;
          r.........完整代码请登录后点击上方下载按钮下载查看