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