CSS+ JS 实现手电筒效果
以下是一个简单的手电筒效果实现，使用了CSS和JavaScript。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Torch Effect</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
overflow: hidden;
}
.torch {
width: 100px;
height: 200px;
background: #ffc107;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 0 0 20px #ffc107;
animation: torch-animation 2s linear infinite;
}
@keyframes torch-animation {
0% {
box-shadow: 0 0 20px #ffc107;
}
50% {
box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107;
}
100% {
box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107, 0 0 100px #ffc107;
}
}
</style>
</head>
<body>
<div class="torch"></div>
<script>
// JavaScript 部分可以为空，因为效果是纯CSS实现的
</script>
</body>
</html>这段代码创建了一个简单的手电筒效果，使用CSS动画来实现手电筒的移动和光芒的扩散。这个例子展示了如何使用CSS创建视觉上的动态效果，而不需要依赖复杂的JavaScript代码。
评论已关闭