<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 整体清零 */
*{
margin: 0;
padding: 0;
}
.heart{
width: 400px;
/* height: 400px; */
margin: 100px auto;
position: relative;
}
/* .lovefall::before,
.lovefall::after{
content: "";
position:absolute;
width: 20px;
height: 30px;
display: block;
background: red;
border-radius: 10px 10px 0 0;
}
.lovefall::before{
transform:rotate(-45deg);
}
.lovefall::after{
transform:rotate(45deg);
left: 7px;
} */
.snowfall-flakes::before,
.snowfall-flakes::after{
content: "";
position:absolute;
width: 20px;
height: 30px;
display: block;
background: red;
border-radius: 10px 10px 0 0;
}
.snowfall-flakes::before{
transform:rotate(-45deg);
}
.snowfall-flakes::after{
transform:rotate(45deg);
left: 7px;
}
body{
/* background-image: url("./img/mother.jpg"); */
/* background-position: center;
background-size: 50%;
background-repeat: no-repeat; */
background-color:mistyrose;
overflow: hidden;
}
.content{
background-image: url("./img/mother.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
/* margin: 0px auto; */
height: 300px;
}
</style>
<script src="./js/jquery.min.js"></script>
<script src="./js/snowfall.jquery.js"></script>
</head>
<body>
<input type="button" value="休息一下吧,么么哒" id="haha" style="background-color:pink;color:purple;">
<input type="button" value="START" id="haha2" style="background-color:pink;color:purple;">
<div class="content">
<div class="heart">
<div class="lovefall"></div>
</div>
</div>
<script type="text/javascript">
var timer;
$(function () {
timer = setTimeout(function(){
$(document).snowfall({falkeCount:520})
},2000);
})
haha.onclick=function(){
// window.clearTimeout(timer);
// window.clearInterval();
$(document).snowfall('clear');
}
haha2.onclick=function(){
// window.clearTimeout(timer);
// window.clearInterval();
// $(document).snowfall('clear');
$(document).snowfall({falkeCount:520})
}
</script>
</body>
</html>
实行效果