js实现可调节颜色亮度室内灯光效果代码-html代码-BFW代码库

js实现可调节颜色亮度室内灯光效果代码

代码语言：html

所属分类：其他

代码描述：js实现可调节颜色亮度室内灯光效果代码

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

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

<head>
  <meta charset="UTF-8">

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root {
	--w: 200px;
	--h: 200px;

	--light-color: 255, 200, 150;
	--warmth-color: white;

	--txt-color: #1d1e22;
	--animation-speed: 1.5s;
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
	width: 100%;

	font-family: "Ubuntu", serif;
	font-weight: 400;
	font-style: normal;
}

body {
	background: var(--txt-color);
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	place-items: center;
	place-content: end;
	min-height: 100vh;
	overflow: hidden;
}

.sphere {
	z-index: -5;
	height: var(--h);
	position: relative;

	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: rotateX(65deg);
}
.sphere::before {
	content: "";
	width: calc(var(--w) * 3);
	height: calc(var(--h) * 3);
	position: relative;
	transform: rotateX(120deg) translateZ(10rem);
	opacity: 0.5;
	background: radial-gradient(
			ellipse at top,
			rgba(var(--light-color)),
			transparent
		),
		radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.2), transparent);
}

.sphere::after {
	content: "";
	width: calc(var(--w) * 3);
	height: calc(var(--h) * 3);
	transform: translateY(24rem) translateZ(-5rem);

	position: absolute;
	bottom: 0;
	background: url("//repo.bfw.wiki/bfwrepo/image/640bef7be2aa5.png"),
		radial-gradient(at center top, rgba(var(--light-color), 0.4), transparent);
}

.circle {
	position: absolute;
	border-radius: 50%;
	border-radius: 20%;
	background-color: rgba(var(--light-color), 0.7);

	box-shadow: 0 0 1rem 0 rgba(var(--light-color), 0.2), inset 0 0 1rem 0 gray;
}

@keyframes rotate {
	0%,
	100% {
		transform: rotateY(-45deg) rotateX(-10deg);
	}
	50% {
		transform: rotateY(45deg) rotateX(10deg);
	}
}.........完整代码请登录后点击上方下载按钮下载查看