<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/main.js"></script>
</head>
<body id="canvas_snow">
<img src="./img/ix.gif" id="imgcontent" style="background:transparent"/>
<canvas id="sakura"></canvas>
<div class="btnbg">
</body>
<style>
html{
height: 100%;
}
body{
background-color:#000000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
overflow:hidden;
}
img{
width: 1280px;
height: 688px;
background: transparent;
position: fixed;
z-index: 9;
}
.btnbg {
position:fixed;
left:0;
top:0;
}
canvas {
padding:0;
margin:0;
position: fixed;
}
#canvas_snow{
background-color: #000000;
}
#imgcontent:before
{
content: '';
position: absolute;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(
-45deg, transparent 33.33%,
lightblue 33.33%, lightblue 66.66%,
transparent 66.66%
);
background-size: 30px 60px;
transform: rotateX(180deg)
}
</style>
</html>
