gsap实现绳梯下拉菜单点击砍断选择选项效果代码-html代码-BFW代码库

gsap实现绳梯下拉菜单点击砍断选择选项效果代码

代码语言：html

代码描述：gsap实现绳梯下拉菜单点击砍断选择选项效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
        
        *,
        *::after,
        *::before {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
        }
        
        :root {
                --rotation: 0deg;
                --opacityFirstAnchor: 0;
        }
        body {
                width: 100%;
                height: 100vh;
                background-color: rgb(235, 138, 94);
        
                align-items: center;
                overflow: hidden;
                font-family: "Creepster", cursive;
                display: flex;
        
                flex-direction: column;
        }
        
        h1 {
                font-size: 5em;
                margin-top: 0.4em;
        }
        
        h1 span {
                color: rgb(0, 0, 0);
                font-size: 0.5em;
                position: relative;
                top: 30px;
                left: -25px;
                transform: rotate(-22deg);
                display: inline-block;
        }
        
        footer {
                margin-top: 3em;
        }
        
        footer a {
                color: black;
        }
        
        .falling-items {
                transform-origin: top right;
        }
        
        .container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin-top: 5em;
        }
        
        .holder {
                display: flex;
                justify-content: space-around;
                margin: -1em;
                border: 2px solid red;
        }
        
        .list-item {
                border-radius: 5px;
                box-shadow: 1px 1px 3px rgb(0, 0, 0);
                color: rgb(194, 194, 194);
                background-color: rgb(0, 0, 0);
                list-style: none;
                margin: 1em 0 1em 0;
                width: 200px;
                height: 30px;
                transform-origin: top right;
                position: relative;
                opacity: 0;
                transition: opacity linear 0.2s;
                padding: 0.5em;
                cursor: pointer;
        }
        
        .list-item-1 {
                opacity: 100;
                display: flex;
                justify-content: space-between;
                padding: 1em 0.6em 1em 1em;
                height: 60px;
                font-size: 1.2em;
        }
        
        i {
                transition: all 0.5s linear;
                transform-origin: center;
                display: inline-block;
                font-size: 1em;
        }
        
        .list-item:before {
                content: " ";
                height: 20px;
                width: 2px;
                border: 1px solid rgb(0, 0, 0);
                top: -20px;
                left: 180px;
                position: absolute;
                z-index: -5;
                transition: opacity linear 0.2s;
        }
        
        .list-item:after {
                content: " ";
                height: 40px;
                width: 2px;
                border: 1px solid rgb(0, 0, 0);
                top: 28px;
                left: 10px;
                position: absolute;
                z-index: -5;
                transition: opacity linear 0.2s;
        }
        
        .list-item-1:before {
                display: .........完整代码请登录后点击上方下载按钮下载查看