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: none;
        }
        
        .list-item-1:after {
        	opacity: var(--opacityFirstAnchor);
        	height: 60px;
        }
        
        .list-item-5:after {
        	display: none;
        }
        
        .list-item-3:before {
        	transform: rotate(var(--rotation));
        	height: 30px;
        	top: -16px;
        }
        
        .list-item-4:before {
        	transform: rotate(var(--rotation));
        	height: 25px;
        	top: -16px;
        }
        
        .list-item-5:before {
        	transform: rotate(var(--rotation));
        	height: 25px;
        	top: -16px;
        }
    </style>



</head>

<body>
    <h1>Haunted DROP<span>ing</span> Menu</h1>
    <div class="container">

        <ul>
            <li class="list-item list-item-1">Try to select one<i class="fas fa-bone"></i></li>
            <li class="list-item list-item-2"> me?</li>
            <div class="falling-items">
                <li class="list-item list-item-3"> or me?</li>
                <li class="list-item list-item-4"> no, select me!</li>
                <li class="list-item list-item-5"> <i class="fas fa-skull"></i><i class="fas fa-skull"></i><i class="fas fa-skull"></i></li>
            </div>
        </ul>

    </div>




<script type="text/javascrip.........完整代码请登录后点击上方下载按钮下载查看