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