css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效
以下是一个使用CSS3和JavaScript实现的左右钟摆摇晃的红灯笼网页特效的简化示例。这个示例仅包含实现摇晃效果的核心代码，没有包含用于调整钟摆样式的CSS代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Clock Shake Effect</title>
<style>
.red-lamp {
width: 100px;
height: 200px;
background-color: #ff0000;
position: relative;
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(10px); }
}
</style>
</head>
<body>
<div class="red-lamp"></div>
<script>
// JavaScript code to add the shake effect is not needed for this example
// as the shake effect is purely CSS-based through the @keyframes animation.
</script>
</body>
</html>这段代码定义了一个简单的.red-lamp类，它将创建一个红色的灯笼并应用无限循环的摇晃动画。动画是通过CSS的@keyframes规则定义的，实现了灯笼左右摇晃的效果。这个示例展示了如何使用CSS动画简化JavaScript动画实现，并减少页面加载时间和资源消耗。
评论已关闭