狸柚子代码实例二
一个简单的太阳页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太阳主题页面</title> </head> <body> <div style="margin:0;height:130vh;background:linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);display:flex;justify-content:center;align-items:center;font-family:Arial,sans-serif;"> <div style="text-align:center;color:white;"> <div style="width:150px;height:150px;background:radial-gradient(circle, #fff176 0%, #ff9800 70%);border-radius:50%;box-shadow:0 0 50px #ffeb3b;margin:0 auto 30px;"></div> <h1 style="font-size:2.5rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,0.3);">太阳的光芒</h1> <p style="max-width:400px;line-height:1.6;margin:0 auto;font-size:1.1rem;">太阳是太阳系的中心天体，为地球提供光和热，维持生命的存在。</p> </div> </div> </body> </html>
一个简单的月亮页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>月亮主题页面</title> </head> <body> <div style="margin:0;height:130vh;background:#0f0c29;display:grid;place-items:center;font-family:Arial"> <div style="text-align:center;color:#fff"> <div style="width:180px;height:180px;background:#e0e0e0;border-radius:50%;box-shadow:0 0 60px rgba(224,224,224,0.6);margin:auto;position:relative"> <div style="width:40px;height:40px;background:#b0b0b0;border-radius:50%;position:absolute;top:30px;left:20px"></div> </div> <h1 style="margin:20px 0 10px;font-size:2rem">皎洁的月光</h1> <p style="max-width:300px;margin:0 auto">月亮是地球唯一的天然卫星</p> </div> </div> </body> </html>
一个简单的星空页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>星空主题页面</title> </head> <body> <div style="margin:0;height:130vh;background:#0a0e17;display:grid;place-items:center"> <div style="position:fixed;inset:0"> <div style="width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;top:15%;left:20%"></div> <div style="width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;top:25%;left:70%"></div> <div style="width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;top:40%;left:50%"></div> </div> <h1 style="color:#fff;font-size:2rem">璀璨星空</h1> <h2 style="color:#fff;font-size:1.5rem">夜空中闪烁的星星</h2> </div> </body> </html>
模拟流星雨动态页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流星雨动态页面</title>
<style>
body {margin:0;height:100vh;background:#0a0e17;overflow:hidden}
.star {width:1px;height:1px;background:#fff;border-radius:50%;position:absolute}
.meteor {width:2px;position:absolute;background:linear-gradient(0deg,transparent,#fff);animation:fall 2s linear}
@keyframes fall {to{top:100%;opacity:0}}
</style>
</head>
<body>
<script>
for(let i=0;i<100;i++){
let s=document.createElement('div');
s.className='star';
s.style.top=Math.random()*100+'%';
s.style.left=Math.random()*100+'%';
document.body.append(s)
}
setInterval(()=>{
let m=document.createElement('div');
m.className='meteor';
m.style.height=50+Math.random()*100+'px';
m.style.top='-100px';
m.style.left=Math.random()*100+'%';
document.body.append(m);
setTimeout(()=>m.remove(),2000)
},300)
</script>
</body>
</html>