用HTML5实现灯笼效果
在HTML5中，可以使用CSS3的动画特性来实现灯笼效果。以下是一个简单的例子，展示了如何使用HTML和CSS创建一个简单的灯笼动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Lamp Effect</title>
<style>
.lamp {
width: 100px;
height: 200px;
background-color: #ffeb3b;
border-radius: 10px;
position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
animation: lampGlow 3s ease-in-out infinite;
margin: 50px auto;
}
.lamp::before {
content: '';
position: absolute;
top: -50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
}
.lamp::after {
content: '';
position: absolute;
bottom: -60px;
left: 10px;
width: 80px;
height: 80px;
background-color: #ffeb3b;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
@keyframes lampGlow {
0% {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
50% {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
100% {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
}
</style>
</head>
<body>
<div class="lamp"></div>
</body>
</html>这段代码创建了一个简单的灯笼效果。.lamp类定义了灯笼的基本样式，并使用CSS动画使其发出光芒。lampGlow关键帧动画使灯笼的盒阴影在大小和透明度上变化，产生灯笼闪烁的效果。这个例子展示了如何使用CSS创建交互式的视觉效果，而不需要依赖Flash或其他复杂的技术。
评论已关闭