css卡片上下切换效果代码-html代码-BFW代码库

css卡片上下切换效果代码

代码语言：html

代码描述：css卡片上下切换效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">



    <style>
        * {
          box-sizing: border-box;
        }
        input {
          visibility: hidden;
        }
        body,
        html {
          align-items: center;
          background: #db0a5b;
          display: flex;
          font-size: 10px;
          justify-content: center;
          margin: 0;
          min-height: 100vh;
          padding: 0;
          overflow: hidden;
        }
        @media (min-width: 768px) {
          body,
          html {
            font-size: 14px;
          }
        }
        @media (min-width: 992px) {
          body,
          html {
            font-size: 16px;
          }
        }
        .card {
          background: #000;
          border-radius: 1.25rem;
          color: #fff;
          filter: drop-shadow(5px 5px 5px #000);
          flex-shrink: 0;
          font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-size: 1.5rem;
          font-weight: bolder;
          height: 28rem;
          padding: 2.5rem;
          position: absolute;
          transition: transform 0.25s ease-out;
          width: 20rem;
        }
        .card:nth-of-type(1) {
          transform: translate(-40%, 0) rotate(-15deg);
        }
        .card__footer {
          align-items: center;
          bottom: 30px;
          display: flex;
          font-size: 0.75rem;
          left: 2.5rem;
          position: absolute;
          right: 2.5rem;
        }
        .card__footer img {
          height: 2rem;
          margin-right: 6px;
          width: 2rem;
        }
        .card--answer {
          color: #000;
          background: #fff;
        }
        #spaces:checked ~ .card--spaces {
          transform: translate(.........完整代码请登录后点击上方下载按钮下载查看