css+js实现光影阴影悬浮效果代码-html代码-BFW代码库

css+js实现光影阴影悬浮效果代码

代码语言：html

代码描述：css+js实现光影阴影悬浮效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Gothic&display=swap" rel="stylesheet">



    <style>
        /* Start */
        
        html {
            margin : 0;
            padding  : 0;
        }
        
        body {
            margin : 0;
            padding : 0;
            width : 100%;
            height: 100vh;
            display : flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color : #000000;
            overflow : hidden;
        }
        
        /* Intro */
        
        #intro {
            position : absolute;
            height: 100vh;
            width: 100vw;
            background-image: url('https://johandavid.fr/images/intro_shadows.gif') ;
            background-size : cover;
            background-position: 50% 50%;
            z-index : 999;
            display : flex;
            justify-content: center;
            align-items: center;
            transition : transform 800ms;
        }
        
        .intro-leaves {
            transform : translateY(-100%);
        }
        
        #pass-intro {
            transition : transform 200ms;
            border : 2px solid white;
        }
        
        #pass-intro:hover {
            background-color: white;
            color: #212121;
            box-shadow : -8px 8px 0px #212121;
            filter : blur(0px);
        }
        
        
        /* Light Button */
        
        #wrap-button, #pass-intro {
            position : absolute;
            width: 167px;
            height: 50px;
            background-color: #212121;
            color: white;
            text-align: center;
            font-family: 'League Gothic', sans-serif;
            font-size: 2em;
            cursor: pointer;
            line-height: 1.5;
            letter-spacing: 2px;
            user-select : none;
        }
        
        #wrap-button:before, #wrap-button:after {
            position : absolute;
            content : '';
            background: linear-gradient(90deg, #1e2529, #fff7e9);
            background-size : 800% 100%;
            top : -3px;
            bottom : -3px;
            left: -3px;
            right: -3px;
            z-index: -1;
        }
        
        #wrap-button:after {
            filter : blur(8px);
        }
        
        .button-on:before, .button-on:after {
            animation : lightRotating 400ms forwards;
        }
        
        #wrap-message {
            position : absolute;
            top : 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow : hidden;
        }
        
        #message-1, #message-2 {
            width: 167px;
            height: 50px;
            transition : transform 200ms;
        }
        
        .up {
            transform : translateY(-50px);
        }
        
        
        /* Back light */
        
        #lighted-zone {
            position : absolute;
            width : 200vw;
            height: 200vh;
            top: -50%;
            left : -50%;
            background: radial-gradient(closest-side, #484848, #2f2f2f, #181818, #0e0e0e, black);
            z-index : -2;
            opacity : 0;
        }
        
        .lighted-zone-on {
            animation : z.........完整代码请登录后点击上方下载按钮下载查看