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

代码语言：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 : zone-on 600ms forwards;
        }
        
        
        /* Circles */
        
        .circle-body {
            position : absolute;
            height : 40px;
            width: 40px;
            border-radius: 40px;
            background-color: #646464;
            z-index : 1;
        }
        
        .circle {
            position : absolute;
            height : 40px;
            width: 40px;
            filter: brightness(0%);
            opacity : 0;
        }
        
        .circle-on {
            animation : zone-on 600ms forwards;
        }
        
        
        /* Shadows */
        
        .wrap-shadow {
            position : absolute;
            top: 20px;
            width: 40px;
            height : 600px;
            transform-origin: top;
            transform : perspective(600px) rotateX(40deg);
        }
        
        .shadow {
            height : 100%;
            width : 100%;
            background : linear-gradient( rgba(0, 0, 0, 0.3) 10% , transparent 100% );
            position : absolute;
        }
        
        .shadow-blur {
            height : 100%;
            width : 100%;
            background : linear-gradient( transparent 10%, rgba(0, 0, 0, 0.8) 70%, transparent 90% );
            filter : blur(4px);
            position : absolute;
        }
        
        
        /* Panel (not implemented yet) */
        
        #panel {
            position : absolute;
            top : 15px;
            left: 15px;
            z-index: 999;
        }
        
        #message-panel {
            font-family: 'League Gothic', sans-serif;
            font-size : 1.3em;
            color : white;
        }
        
        #wrap-colored-dots {
            display: flex;
            justify-content: space-between;
            height: 40px;
            background-color: #606060;
            flex-direction: row;
            align-items: center;
        }
        
        .colored-dot {
            height: 14px;
            width: 14px;
            border-radius: 10px;
            border: 1px solid #262626;
            cursor: pointer;
            margin: 0px 10px 0px 10px;
        }
        
        .colored-dot:hover {
            border : 1px solid white;
        }
        
        .red-dot { background-color : red; }
        .green-dot { background-color : green; }
        .blue-dot { background-color : blue; }
        .white-dot { background-color : white; }
        
        
        /* Animations */
        
        @keyframes lightRotating {
            0% {
                background-position : 0%;
            }
        
            100% {
                background-position : 100%;
            }
        }
        
        @keyframes zone-on {
            0% {
                opacity : 0;
            }
        
            100% {
                opacity : 1;
            }
        }
        
        
        /* Future improvements
        
        #panel {
            position : absolute;
            top : 15px;
            left: 15px;
            z-index: 999;
        }
        
        #message-panel {
            font-family: 'League Gothic', sans-serif;
            font-size : 1.3em;
            color : white;
        }
        
        #wrap-colored-dots {
            display: flex;
            justify-content: space-between;
            height: 40px;
            background-color: #606060;
            flex-direction: row;
            align-items: center;
        }
        
        .colored-dot {
            height: 14px;
            width: 14px;
            border-radius: 10px;
            border: 1px solid #262626;
            cursor: pointer;
            margin: 0px 10px 0px 10px;
        }
        
        .colored-dot:hover {
            border : 1px solid white;
        }
        
        .red-dot { background-color : red; }
        .green-dot { background-color : green; }
        .blue-dot { background-color : blue; }
        .white-dot { background-color : white; } */
    </style>


</head>

<body>
    <div id="intro">
        <div id="pass-intro">Try it !</div>
    </div>

    <div id="wrap-button">
        <div id="wrap-message">
            <div id="message-1">Hover me</div>
            <div id="message-2">Move me</div>
        </div>
    </div>

    <div id="lighted-zone"></div>
  


    <script>
      class button {

    lightMode = false;
    moveMode = false;
    posX = null;
    posY = null;
    catchPointX = null;
    catchPointY = null;
    circlesPos = [];
    circlesSizes = [];
    dists = [];

    static HOWMANYCIRCLES = 13;

    constructor () {
        this.target = document.getElementById('wrap-button');
        this.initTargetPos();
        this.light = document.querySelector('#lighted-zone');
        this.message = document.getElementById('message-1');
        this.message2 = document.getElementById('message-2');
        this.events();
        this.circles();
        window.onresize = this.resize.bind(this);
    }

    initTargetPos() {
        this.targetPos = this.target.getBoundingClientRect();
    }

    resize() {
        if (!this.target.style.top) {
            this.initTargetPos();
        }
        this.moveLight();
    }

    events() {
        this.target.addEventListener('mouseover', (e)=>{
            this.over(e);
        });
        this.target.addEventListener('mouseout', (e)=>{
            this.out(e);
        });
        this.target.addEventListener('mousedown', (e)=>{
            this.clic(e);
        });
        this.target.addEventListener('mouseup', (e)=>{
            this.endclic(e);
        });
        document.addEventListener('mousemove', (e)=>{
            this.mousemove(e);
        });
        document.addEventListener('mouseout', (e)=>{
            this.mouseOutWindow(e);
        });
    }

    create(className) {
        let element = document.createElement('div');
        element.classList.add(className);
        return element;
    }

    circles() {
        let nb = button.HOWMANYCIRCLES;

        for(let i=0;i<nb;i++) {
            let circle = this.createCircle(i);
            this.placeCircle(circle);
            let size = this.resizeCircle(circle);
            this.circlesSizes[i] = size;
            this.resizeShadow(circle, size);
        }

        this.updateShadows();
    }

    createCircle(i) {
        // Wrap
        let element = this.create('circle');
        element.classList.add('c-' + i);

        // Body
        let circleBody = this.create('circle-body');

        // Shadow
        let shadow = this.create('shadow');

        // Blured shadow
        let shadowBlur = this.create('shadow-blur');

        // Insertion
        let wrapShadow = document.createElement('div');
        wrapShadow.classList.add('wrap-shadow');
        wrapShadow.appendChild(shadow);
        wrapS.........完整代码请登录后点击上方下载按钮下载查看