three实现三维儿童玩积木代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维儿童玩积木代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#7EC3F2">
<title>云朵积木坊 · 小小建筑师的3D世界</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧱</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Baloo+2:wght@600;800&display=swap" rel="stylesheet">
<style>
/* ============ 基础 ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Baloo 2','ZCOOL KuaiLe','PingFang SC','Microsoft YaHei',sans-serif;
  color:#5B4632;
  background:linear-gradient(180deg,#6FBBEF 0%,#A5D8F8 42%,#D9F0FF 78%,#EFFAFF 100%);
  display:flex;flex-direction:column;height:100dvh;
}
.disp{font-family:'ZCOOL KuaiLe','Baloo 2','PingFang SC',sans-serif}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============ 天空背景层 ============ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sun{position:fixed;top:-70px;right:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,#FFE89A 0%,#FFD93D 55%,rgba(255,217,61,0) 72%);
  box-shadow:0 0 90px 40px rgba(255,224,130,.55);}
.sun::before{content:"";position:absolute;inset:-90px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,222,110,.30) 0 7deg,transparent 7deg 19deg);
  animation:spin 46s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.rainbow{position:fixed;left:-190px;top:90px;width:480px;height:480px;border-radius:50%;opacity:.45;
  background:radial-gradient(circle,transparent 52%,#FF6B6B 52% 58%,#FFA94D 58% 64%,#FFD93D 64% 70%,#6BCB77 70% 76%,#4DABF7 76% 82%,#B197FC 82% 88%,transparent 88%);}
.cloud{position:fixed;background:#fff;border-radius:60px;opacity:.92;filter:drop-shadow(0 6px 8px rgba(120,160,200,.25));animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:120px;height:38px;top:12%;animation-duration:70s;animation-delay:-12s}
.cloud.c1::before{width:52px;height:52px;top:-24px;left:18px}
.cloud.c1::after{width:38px;height:38px;top:-16px;left:62px}
.cloud.c2{width:90px;height:30px;top:30%;animation-duration:95s;animation-delay:-50s;opacity:.8}
.cloud.c2::before{width:40px;height:40px;top:-18px;left:14px}
.cloud.c2::after{width:28px;height:28px;top:-11px;left:48px}
.cloud.c3{width:150px;height:44px;top:55%;animation-duration:120s;animation-delay:-80s;opacity:.65}
.cloud.c3::before{width:60px;height:60px;top:-28px;left:24px}
.cloud.c3::after{width:44px;height:44px;top:-18px;left:78px}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(115vw)}}
.bird{position:fixed;width:30px;height:12px;animation:fly 34s linear infinite}
.bird::before,.bird::after{content:"";position:absolute;top:0;width:14px;height:10px;
  border:2.5px solid #5E7FA3;border-bottom:none;border-radius:14px 14px 0 0}
.bird::before{left:0;transform-origin:right bottom;animation:flap .7s ease-in-out infinite}
.bird::after{right:0;transform-origin:left bottom;animation:flap .7s ease-in-out infinite reverse}
.bird.b1{top:20%;animation-delay:-6s}
.bird.b2{top:26%;transform:scale(.7);animation-delay:-20s;animation-duration:41s}
@keyframes fly{from{transform:translateX(-60px)}to{transform:translateX(110vw)}}
@keyframes flap{50%{transform:rotate(-24deg)}}
.island{position:fixed;width:96px;height:26px;background:linear-gradient(180deg,#9BE15D,#7BC94C);border-radius:50%;animation:bob 6s ease-in-out infinite}
.island::after{content:"";position:absolute;left:22%;top:70%;width:56%;height:44px;
  background:linear-gradient(180deg,#B98A5F,#8A5F3C);clip-path:polygon(0 0,100% 0,68% 100%,32% 100%)}
.island.i1{left:6%;top:64%}
.island.i2{right:9%;top:70%;transform:scale(.7);animation-delay:-3s}
@keyframes bob{50%{translate:0 -10px}}

/* ============ 顶栏 ============ */
head.........完整代码请登录后点击上方下载按钮下载查看