js动态樱花特效
以下是完整的js动态樱花特效，用HTML代码写出来，可以直接在浏览器中查看效果：
<!DOCTYPE html>
<html>
<head>
<title>动态樱花</title>
<style>
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: #FFC0CB;
}
.cherry {
position: absolute;
width: 100px;
height: 100px;
background: url('cherry.png') no-repeat center center;
background-size: cover;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="cherryBlossoms">
<div class="cherry"></div>
</div>
<script>
window.onload = function() {
var container = document.getElementById('cherryBlossoms');
var cherry = document.createElement('div');
cherry.className = 'cherry';
cherry.style.left = '50%';
cherry.style.top = '50%';
container.appendChild(cherry);
};
</script>
</body>
</html>代码解释：
HTML部分定义了一个页面，包含一个<div>元素作为樱花容器，并引入了一个CSS样式表。其中.cherry类定义了樱花的样式，包括位置、大小、背景图片和动画效果等。我们使用了背景图片cherry.png，你需要将其替换为真实的樱花图片。
JavaScript部分在页面加载完成后运行。通过window.onload事件监听页面加载完成的事件。在这个事件处理函数中，我们创建了一个樱花元素，并设置其样式为居中显示。然后将其添加到樱花容器中。这里只生成了一个樱花元素，如果需要生成多个樱花，可以循环创建并添加到容器中。
CSS部分定义了樱花的样式和动画效果。我们使用了CSS的关键帧动画（@keyframes）来创建旋转动画效果。在rotate动画中，我们将元素的旋转角度从0度变化到360度，从而实现旋转效果。动画的持续时间为2秒，线性过渡，并且是无限循环的。此外，还定义了樱花的样式，包括位置、大小、背景图片等。注意，这里的樱花使用了真实的樱花图片，你需要将cherry.png替换为真实的图片路径。
