卡片打开动画效果-html代码-BFW代码库

卡片打开动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
:root {
        --color-primary: #43a047;
        --color-primary-darken: #388e3c;
        --color-secondary: #F6D8D1;
        --color-white: white;
        --color-accent: #FCF5F3;
        --spacer: 1.25rem;
        --d: 2000ms;
        --d2: 600ms;
        --e: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        --e2: cubic-bezier(0.23, 1, 0.32, 1);
    }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: var(--color-secondary);
            display: grid;
            font-family: 'Roboto', sans-serif;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            padding: var(--spacer);
            place-items: center;
        }

        .card {
            display: flex;
            flex-direction: column;
            max-width: 350px;
            overflow: hidden;
            padding: 0 var(--spacer);
            perspective: 1200px;
            position: relative;
            transform: translateY(30%);
            transition: transform var(--d2) var(--e2);
        }
        .card.is-active {
            animation: throw var(--d2) var(--e2) forwards;
        }
        .card.is-closing {
            transform: translateY(0);
        }

        .card__illustration {
            cursor: pointer;
            display: flex;
            justify-content: center;
            width: 100%;
            background-color: var(--color-accent);
            z-index: 2;
        }
        .card__illustration svg {
            width: 100%;
            max-width: 150px;
            transform: translate(calc(var(--x) /100 * 1px), calc(var(--y) / 100 * 1px));
        }
        .card__illustration .face-group {
            transform: translate(calc(var(--x) /120 * 1px), calc(var(--y) / 120 * 1px));
        }
        .is-active .card__illustration, .is-closing .card__illustration {
            pointer-events: none;
        }
        .is-active .card__illustration svg,
        .is-active .........完整代码请登录后点击上方下载按钮下载查看