大家好,今天给大家介绍一款,css实现的,桃子桃花动态背景html页面源码 (图1)。送给大家哦,获取方式在本文末尾。
图1
桃子会慢慢摇晃,鼠标经过会加速摇晃(图2)
背景有花瓣雨特效(图3)
![](https://i-blog.csdnimg.cn/blog_migrate/63060ee678e1e9f1eaeea129ff550ad8.gif)
图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>