css+svg实现聚光灯照射玻璃弹珠效果代码-html代码-BFW代码库

css+svg实现聚光灯照射玻璃弹珠效果代码

代码语言：html

代码描述：css+svg实现聚光灯照射玻璃弹珠效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
	--marblesize: 200px;
	--basecolor: 215;

	--backgroundcolor: hsl(var(--basecolor), 60%, 75%);
	--inside: hsl(var(--basecolor), 60%, 35%);
	--shadow: hsla(var(--basecolor), 60%, 15%, 0.5);
	--shadowlight: hsla(var(--basecolor), 60%, 15%, 0.3);
	--shadowdark: hsla(var(--basecolor), 60%, 15%, 0.8);
}

body {
	display: grid;
	height: 100vh;
	place-items: center;
	background-color: var(--backgroundcolor);
	background-image: conic-gradient(
		from 0turn at 50% 0px,
		var(--backgroundcolor) 45%,
		rgba(255, 255, 255, 0.3) 48%,
		rgba(255, 255, 255, 0.3) 52%,
		var(--backgroundcolor) 55%
	);
}

.marble {
	width: var(--marblesize);
	height: var(--marblesize);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0px -10px 40px var(--shadow),
		inset 0px -1px 1px var(--shadowlight);
	position: relative;
}

/* Reflections */
.marble:after {
	content: "";
	border-radius: 30%;
	width: var(--marblesize);
	height: var(--marblesize);
	position: absolute;
	z-index: -1;
	bottom: calc((var(--marblesize) / 2 * -1));
	left: 0px;
	transform: perspective(150px) rotatex(80deg);
	filter: blur(20px);
	background: radial-gradient(
		circl.........完整代码请登录后点击上方下载按钮下载查看