支付时过渡动画


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @font-face {
            font-family: 'edo';
            src: url(./fonts/Edo.woff2);
        }

        :root {
            --background: #33837e;
            --wrapper-left-background: #5de2a3;
            --card: #c7ffbc;
            --card-line: #80ea69;
            --card-circle-color-1: #56be3e;
            --card-circle-color-2: #379e1f;
            --card-circle-color-3: #26850e;

            --pos: #dddde0;
            --numbers: #838183;
            --numbers-2: #aaa9ab;
            --pos-line: #757375;
            --pos-line2: #545354;
            --dollar: #4b953b;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        body {
            padding: 0;
            margin: 0;

            display: flex;
            align-items: center;
            justify-content: center;
             100%;
            height: 100vh;

            background-color: var(--background);

            font-family: 'edo';
        }

        .wrapper {
             400px;
            height: 130px;
            border-radius: 5px;
            background-color: white;
            transition: all .3s linear;

            display: flex;
            justify-content: right;
            align-items: center;

            position: relative;

        }

        .wrapper:hover {
            transform: scale(1.2);
        }

        .wrapper:hover .wrapper-left {
             100%;
        }

        .wrapper:hover .card {
            animation: move-card 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
        }

        .wrapper:hover .pos {
            animation: move-pos 1s cubic-bezier(0.645, 0.045, 0.355, 1) both;
        }

        .wrapper:hover .pos-screen-money {
            animation: opacity-money 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
        }


        .wrapper-left {
            transition: all .3s linear;
             130px;
            height: 130px;
            line-height: 130px;
            border-radius: 5px;
            background-color: var(--wrapper-left-background);

            display: flex;
            align-items: center;

            overflow: hidden;

            position: absolute;
            left: 0;
        }

        .wrapper-right {
            padding-right: 70px;
            color: var(--card-circle-color-3);
        }

        .card {
            border-radius: 5px;
             80px;
            height: 48px;
            background-color: var(--card);
            position: relative;

            transition: all 0.3s linear;

            margin: auto;
        }

        .card-stripe {
             70px;
            height: 15px;

            background-color: var(--card-line);
            border-radius: 2px;

            position: absolute;
            top: 10px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .card-circle-box {
            position: absolute;
            bottom: 9px;
            left: 5px;

            display: flex;
        }

        .card-circle {
             8px;
            height: 8px;
            border-radius: 50%;

            margin-right: 2px;
        }

        .card-circle:nth-child(1) {
            background-color: var(--card-circle-color-1);
        }

        .card-circle:nth-child(2) {
            background-color: var(--card-circle-color-2);
        }

        .card-circle:nth-child(3) {
            background-color: var(--card-circle-color-3);
        }


        @keyframes move-card {
            50% {
                transform: translate(0, -70px) rotate(90deg);
            }

            100% {
                transform: translate(0, 0px) rotate(90deg);
            }
        }

        @keyframes move-pos {
            0% {
                transform: translate(-50%, 0);
            }

            100% {
                transform: translate(-50%, -90px);
            }
        }

        @keyframes opacity-money {
            90% {
                opacity: 0;
                transform: translateY(-5px);
            }

            100% {
                opacity: 1;
                transform: translateY(0px);
            }
        }

        .pos {
             66px;
            height: 114px;
            background-color: var(--pos);
            margin: auto;
            position: absolute;
            bottom: -135px;
            left: 50%;
            transform: translate(-50%, 0);

            border-radius: 7px;
        }

        .pos-head {
            margin: auto;

             50px;
            height: 16px;

            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;

            background-color: var(--pos-line);
        }

        .pos-screen {
            margin: auto;

             50px;
            height: 25px;
            line-height: 25px;
            border-radius: 5px;

            margin-top: 5px;
            background-color: white;
            text-align: center;
        }

        .pos-screen-money {
            opacity: 0;
            color: var(--dollar);
            font-weight: bold;
        }

        .pos-keyboards {
            margin: auto;
             50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .pos-keyboards-key {
             15px;
            height: 15px;
            border-radius: 5px;
            background-color: var(--numbers);
            margin-top: 5px;
        }
    </style>

</head>

<body>

    <div class="wrapper">
        <div class="wrapper-left">
            <div class="card">
                <div class="card-stripe"></div>
                <ul class="card-circle-box">
                    <li class="card-circle"></li>
                    <li class="card-circle"></li>
                    <li class="card-circle"></li>
                </ul>
            </div>

            <div class="pos">
                <div class='pos-head'></div>
                <div class="pos-screen">
                    <span class="pos-screen-money">$</span>
                </div>
                <ul class="pos-keyboards">
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                    <li class="pos-keyboards-key"></li>
                </ul>
            </div>
        </div>
        <div class="wrapper-right">New Transaction</div>
    </div>

</body>

</html>

代码参考于：https://codepen.io/TurkAysenur/pen/wvaGqXW
照着动画自己写了一遍。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lbx6935/p/15662904.html