【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码）】
以下是实现蝴蝶飞舞特效的完整HTML、CSS和JavaScript代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蝴蝶飞舞特效</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#butterfly {
position: absolute;
width: 100px;
height: 100px;
background: url('butterfly.png') no-repeat;
background-size: cover;
opacity: 0.75;
animation: fly 5s infinite ease-in-out;
}
@keyframes fly {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px) translateY(100px);
}
100% {
transform: translateX(200px) translateY(0);
}
}
</style>
</head>
<body>
<div id="butterfly"></div>
<script>
// JavaScript代码可以为空，因为所有动画逻辑都在CSS中定义
</script>
</body>
</html>在这个示例中，我们定义了一个#butterfly元素，并通过CSS的@keyframes规则创建了一个飞行动画。这个飞行路径是一个三角形，通过调整transform属性的translateX和translateY值来实现。这个示例展示了如何使用CSS动画创建简单的交互效果，而无需依赖复杂的JavaScript代码。
评论已关闭