cardSpreadPosition实现滚动卡片位移入场动画效果代码-html代码-BFW代码库

cardSpreadPosition实现滚动卡片位移入场动画效果代码

代码语言：html

代码描述：cardSpreadPosition实现滚动卡片位移入场动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <style>
        @property --card-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
    @property --card-x {
        syntax: "<length>";
        initial-value: 0px;
        inherits: false;
    }
    @property --card-y {
        syntax: "<length>";
        initial-value: 0px;
        inherits: false;
    }
    
    .card {
        --card-x: 0px; /* auto set by CardSpreadPosition.js */
        --card-y: 0px; /* auto set by CardSpreadPosition.js */
        --card-angle: 0deg; /* auto set by CardSpreadPosition.js */
        
        position: relative; /* or sticky */
        width: 200px;
        height: 200px;
        
        animation: anim linear both;
        animation-timeline: view();
        animation-range: entry 25% contain 50%;
        transform-origin: center;
        transform: rotate3d(0, 0, 1, var(--card-angle))
            translate3d(var(--card-x), var(--card-y), 0);
    }
    @keyframes anim {
        to {
            --card-x: 0px;
            --card-y: 0px; /* if you want. */
            --card-angle: 0deg; /* if you want. */
        }
    }
    .card{
   
        margin: 20px;
        background: white;
        height: 300px;
        width: 200px;
       border-radius: 50px;
background: #e0e0e0;
box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
    }
    </style>
</head>

<body>
    <div class="card">.........完整代码请登录后点击上方下载按钮下载查看