为你的网站点亮新年喜庆：两款炫彩灯笼代码教程

2023-04-18 14:36:43

用新年灯笼代码为你的网站增添节日气氛

新年即将到来，作为一名网站主，你是否希望为你的网站增添一些节日装饰，让其充满喜庆气氛？有了我们分享的这两款简单实用的新年灯笼代码，你就能轻松实现这个目标。

第一款灯笼：灵动飞舞

这款灯笼采用 CSS 和 JavaScript 相结合，创造出一个在屏幕上飞舞的动感灯笼。它由一个圆形的灯笼主体、两根细长的流苏和一个可自由移动的灯芯组成。通过调整灯芯的速度和位置，你可以控制灯笼在页面中的移动轨迹，营造出一种轻盈灵动的视觉效果。

代码示例：

<div id="lantern1" style="width:200px;height:300px;position:absolute;top:50px;left:50px;">
<div style="width:200px;height:200px;border-radius:100px;background:#FFEB3B;"></div>
<div style="width:20px;height:100px;position:absolute;top:150px;left:90px;background:#E91E63;"></div>
<div style="width:20px;height:100px;position:absolute;top:150px;left:110px;background:#E91E63;"></div>
</div>

<script>
var lantern1 = document.getElementById("lantern1");
var lantern1Left = 50;
var lantern1Top = 50;
var lantern1Speed = 5;

setInterval(function(){
lantern1Left += lantern1Speed;
lantern1.style.left = lantern1Left + "px";
if(lantern1Left >= window.innerWidth - 200){
lantern1Speed = -lantern1Speed;
} else if(lantern1Left <= 0){
lantern1Speed = -lantern1Speed;
}
},10);

setInterval(function(){
lantern1Top += lantern1Speed;
lantern1.style.top = lantern1Top + "px";
if(lantern1Top >= window.innerHeight - 300){
lantern1Speed = -lantern1Speed;
} else if(lantern1Top <= 0){
lantern1Speed = -lantern1Speed;
}
},10);
</script>

第二款灯笼：流光溢彩

这款灯笼利用 CSS 中的动画效果，实现了一个在页面中不断变化发光的灯笼。它同样由一个圆形的灯笼主体和两根细长的流苏组成。通过在主体上添加一个动态的盒阴影，我们让灯笼呈现出一种流光溢彩的效果，仿佛在灯笼内部有一盏闪烁的蜡烛。

代码示例：

<div id="lantern2" style="width:200px;height:300px;position:absolute;top:50px;left:50px;">
<div style="width:200px;height:200px;border-radius:100px;background:#FFEB3B;animation:lantern2-glow 2s infinite alternate;"></div>
<div style="width:20px;height:100px;position:absolute;top:150px;left:90px;background:#E91E63;"></div>
<div style="width:20px;height:100px;position:absolute;top:150px;left:110px;background:#E91E63;"></div>
</div>

<style>
@keyframes lantern2-glow {
0% {
box-shadow: 0 0 10px #FFEB3B;
}
50% {
box-shadow: 0 0 20px #FFEB3B;
}
100% {
box-shadow: 0 0 10px #FFEB3B;
}
}
</style>