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,.........完整代码请登录后点击上方下载按钮下载查看