css实现多重阴影跟随鼠标运动动画效果代码-html代码-BFW代码库

css实现多重阴影跟随鼠标运动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现多重阴影跟随鼠标运动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400&family=Cute+Font&display=swap" rel="stylesheet">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
        :root {
        	--black: #000;
        	--black50: #00000050;
        	--grey50: #343538;
        	--grey5: rgba(92, 96, 107, 0.5);
        	--grey: #7d808a;
        	--white: #fff;
        	--white00: #ffffff00;
        }
        
        *,
        *::after,
        *::before,
        html,
        body {
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        }
        
        body {
        	background-color: var(--grey);
        	font-family: "Bebas Neue", cursive;
        	display: grid;
        	height: 100vh;
        	place-items: center;
        }
        
        #frame {
        	background: var(--white);
        	border: 2vmin solid var(--black);
        	box-shadow: 0 4vmin 8vmin -4vmin;
        	box-sizing: content-box;
        	display: grid;
        	height: 80vmin;
        	overflow: hidden;
        	padding: 4vmin;
        	place-items: end;
        	position: relative;
        	width: 50vmin;
        }
        
        #canvas {
        	background: radial-gradient(
        		circle at 50% 125%,
        		var(--grey50),
        		var(--black) 50%
        	);
        	display: grid;
        	height: 100%;
        	place-items: center;
        	position: relative;
        	transition: all 0.3s ease;
        	width: 100%;
        }
        
        #canvas::after {
        	animation: bs 10s linear infinite alternate;
        	background: radial-gradient(
        			circle at 150% 125%,
        			var(--grey),
        			var(--white00) 65%
        		),
        		radial-gradient(circle at 0% -100%, var(--white), var(--white00) 65%);
        	border-radius: 40% 60% 60% 40% / 56% 45% 55% 44%;
        	box-shadow: 5vmin 2.5vmin 8vmin -4vmin var(--white) inset,
        		-2vmin 0vmin 16vmin -14vmin var(--white) inset,
        		-4vmin 4vmin 5vmin -5vmin var(--white) inset;
        	content: "";
        	filter: drop-shadow(10vmin 4vmin 4vmin var(--black));
        	height: 40vmin;
        	position: absolute;
        	transition: 0.3s linear;
        	width: 40vmin;
        }
        
        @keyframes bs {
        	0% {
        		box-shadow: 5vmin 2.5vmin 8vmin -4vmin var(--white) inset,
        			-2vmin 0vmin 16vmin -14vmin var(--white) inset,
        			-4vmin 4vmin 5vmin -5vmin var(--white) inset;
        	}
        	50% {
        		box-shadow: 2vmin 5vmin 8vmin -4vmin var(--white) inset,
        			-2vmin 0vmin 16vmin -14vmin var(--white) inset,
        			-10vmin 4vmin 5vmin -3vmin var(--white) inset;
        	}
        	100% {
        		box-sh.........完整代码请登录后点击上方下载按钮下载查看