css实现的，桃子桃花动态背景html页面源码

本文链接：https://blog.csdn.net/mazai5080/article/details/124464152

大家好，今天给大家介绍一款，css实现的，桃子桃花动态背景html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

桃子会慢慢摇晃，鼠标经过会加速摇晃（图2）

背景有花瓣雨特效（图3）

图3

源码完整，需要的朋友可以下载学习（图4）

图4

本源码编码：10146，需要的朋友，关注文末公众号，搜索10146，即可获取。

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<title>CSS3 摇晃的桃子</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

	<body>
		<div class="back">
			<div class="header">
				<p>【点击页面任意位置播放背景音乐】</p>
			</div>
			<audio id="touchstart" autoplay controls loop src="除了春天爱情和樱花 - 鱼糕 _ 告告.mp3"></audio>

			<div class="act_wrapper">
				<div class="act_content">
					<div class="mod_style">
						<p>摇晃的桃子</p>
						<span class="peach peach1 shake1"></span>
						<span class="peach peach2 shake2"></span>
						<span class="peach peach3 shake3"></span>
						<span class="peach peach4 shake4"></span>
						<span class="peach peach5 shake5"></span>
						<span class="peach peach6 shake6"></span>
					</div>
				</div>
				<div class="act_bg"></div>
			</div>
		</div>

		<script>
			function toggleSound() {
				undefined
				var music = document.getElementById("touchstart");
				if(music.paused) {
					music.paused = false;
					music.play();
				}
			}
			setInterval("toggleSound()", 1);
		</script>

	</body>

</html>