<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="img/CSS.css?v=3">
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/canvas_bg.js?v=1.3" ></script>
<style>
body,html{
margin:0;padding:0;
overflow:hidden
}
.svoiceIcon{
animation-name:colorswitchs;
animation-duration: 3s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
@keyframes colorswitchs {
0% {
color: #0087C9
}
20% {
color: #EF4A53
}
40% {
color: #804cfa
}
60% {
color: #FFB463
}
80% {
color: #33D5D4
}
100% {
color: #0087C9
}
}
.star{
width: 100%;
position: fixed;
left: 0;
top: 40vh;
display:none;
z-index:9991
}
/*心跳开始 */
.heart{
width: 200px;
height: 200px;
background: #f00;
position: relative;
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
transform: rotate(45deg);
margin: 20px auto;
}
.heart{
animation-name:heartbeat;
animation-duration: 1s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
.heart:before, .heart:after{
content: "";
position: absolute;
width: 200px;
height: 200px;
background: #f00;
border-radius: 100px;
}
.heart:before{
left: -100px;
}
.heart:after{
left: 0;
top: -100px;
}
@keyframes heartbeat{
0%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
25%{transform: rotate(45deg) scale(1,1); opacity: 0.8;}
100%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
}
/* 心跳结束 */
.music{
position: fixed;
right: 4%;
top: 2%;
width: 120px;
height: 120px;
z-index: 999999;
opacity:0.5
}
.musicRotate{
animation-name:musicrotate;
animation-duration: 4s; /*动画时间*/
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari 和 Chrome */
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
@keyframes musicrotate{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body>
<audio id="player" src="img/love.mp3" loop="loop" hidden="true" autoplay="autoplay"></audio>
<canvas id="c" style="position: absolute;z-index: -1;text-align: center;height:100vh;top:0;left:0;width:100%"></canvas>
<img onclick="playMusic(this)" class="music musicRotate" src="img/musicP.png">
<div onclick=star() style="position: absolute;top: 200px;width: 100%;cursor: pointer;text-align:center;font-size:20px;font-weight:bold;z-index:9990"><h1 class="svoiceIcon">你知道吗，等待是最长情的告白♥</h1></div>
<div class="wrap">
<div class="cube">
<div class="out_front">
<img src="img/1.jpg" class="pic">
</div>
<div class="out_back">
<img src="img/2.jpg" class="pic">
</div>
<div class="out_left">
<img src="img/3.jpg" class="pic">
</div>
<div class="out_right">
<img src="img/4.jpg" class="pic">
</div>
<div class="out_top">
<img src="img/5.jpg" class="pic">
</div>
<div class="out_bottom">
<img src="img/6.jpg" class="pic">
</div>
<span class="in_front">
<img src="img/7.jpg" class="in_pic">
</span>
<span class="in_back">
<img src="img/8.jpg" class="in_pic">
</span>
<span class="in_left">
<img src="img/9.jpg" class="in_pic">
</span>
<span class="in_right">
<img src="img/10.jpg" class="in_pic">
</span>
<span class="in_top">
<img src="img/11.jpg" class="in_pic">
</span>
<span class="in_bottom">
<img src="img/12.jpg" class="in_pic">
</span>
</div>
</div>
<div style="position:absolute;width:100%;left:0;bottom:0">
<svg id="flowers" xmlns="http://www.w3.org/2000/svg" viewBox="120 25 1800 1125">
<g id="Branches_Group">
<g id="BranchGroup-right-16" data-position="right">
<g id="smallbranch-group-C">
<path id="bloom-A" d="M1559.42,330.79c-.5-.48-.32-1.11,0-2a45.66,45.66,0,0,1,2.36-4.24,65,65,0,0,1-6.36,2.57c-1.27.26-2.66.69-3.38-.87-.48-1,.76-2.61,1.58-3s5-3.14,5-3.14-6.67.54-7-1.68c-.16-1.23.6-1.8,3.48-2.63a21.64,21.64,0,0,1,7.85-.54c1.76.2,5.69.53,6.4,2s-.78,4.95-.78,4.95a32.82,32.82,0,0,1-2.5,3.9,53.79,53.79,0,0,1-4.41,4.49C1560.91,331.35,1560.11,331.45,1559.42,330.79Z" transform="translate(115.14 14.02)" style="fill: #fff"/>
<path id="smallbranch-C" d="M1619.31,243.54c-1,12.55-8.21,31-8.21,31s5,9.65,3.7,24.28c-1.44,16.09-13.79,31.61-13.79,31.61s9.19-16.93,10-30.7c.78-13-2.56-21.24-2.56-21.24s-6.81,14.76-13,22.22a47.49,47.49,0,0,1-23.83,16c.13.43,0,.94-.67,1.56,0,1-.77,4-2.4,3.54-1.07-.31,0-3.86-.4-4.47-.18-.32-3-.61-3.68-1.17-1.72-1.5.61-1.57,1.74-1.5a14.5,14.5,0,0,1,4.11.91c.66-.3,1.29-.6,1.84-.89a54.55,54.55,0,0,0,17.13-13.41c6.39-7.61,11.91-20.87,16.2-30a79.2,79.2,0,0,0,6-33.88c0-.57-1.13-15.74-1.16-16.32,4.23-4.57,5.6-8.27,9.19-12.81,0,.52.44,13.09.44,13.75C1620,226.74,1620,235,1619.31,243.54Z" transform="translate(115.14 14.02)" style="fill: #3a271f"/>
</g>
<g id="smallbranch-group-B">
<path id="bud-A" d="M1693.7,166.88c-.26,3.06,3,6.86,6,6.8s3.87-2.79,3-5.06-2.37-4.14-4.24-4.41-2.93-.18-3.74.66A4,4,0,0,0,1693.7,166.88Z" transform="translate(115.14 14.02)" style="fill: #fff"/>
<path id="smallbranch-B" d="M1706.47,120.42a23.66,23.66,0,0,1-6,12.52c-3.36,3.45-7.63,6.73-8.93,12.73-1,4.51-.8,6.89.53,11.49a45.23,45.23,0,0,0,2.23,5.88,1.8,1.8,0,0,1,1.37.33c.87-.29,3.92-.34,3.9,1.29,0,1.07-3.56,1.06-4,1.54-.24.25.23,3-.12,3.71-.93,2-1.62-.15-1.84-1.22-.17-.8-.57-3.44-.05-4.83a13.17,13.17,0,0,1-2.78-3.55,26.13,26.13,0,0,1-3.37-13.66c.15-3.45,1.94-8.49,6.48-13.48,3.05-3.36,4.37-6.81,5.29-11,.73-3.35.06-10.54-.44-14.74,0-.4-1-7.92-1.08-8.26a67.55,67.55,0,0,1,9.58-.83c0,.32,0,7.4,0,7.75A121.74,121.74,0,0,1,1706.47,120.42Z" transform="translate(115.14 14.02)" style="fill: #3a271f"/>
</g>
<g id="smallbranch-group-A">
<path id="bud-C" d="M1551.42,158.71c-.79-3-5.17-5.43-7.94-4.37s-2.7,3.93-1.08,5.77,3.63,3.1,5.48,2.71,2.81-.82,3.29-1.89A4,4,0,0,0,1551.42,158.71Z" transform="translate(115.14 14.02)" style="fill: #fff"/>
<path id="bud-B" d="M1561.94,109.78c1.7-2.56.66-7.47-2-8.84s-4.73.58-5,3,.07,4.77,1.59,5.91,2.48,1.57,3.6,1.22A4,4,0,0,0,1561.94,109.78Z" transform="translate(115.14 14.02)" style="fill: #fff"/>
<path id="smallbranch-A" d="M1612,146.29c-5.17,2-8.83,3.53-11.54,4.77-8.63,3.93-10.58,5.71-20.22,10-7.56,3.34-13.59,4-19.71,3.34a34,34,0,0,1-8-2.38c-.17.59-.67.93-1.78.71-.72.56-3.57,1.65-4.11.11-.36-1,3-2.2,3.27-2.81.15-.32-1.22-2.71-1.14-3.53.21-2.18,1.57-.4,2.15.52a13.71,13.71,0,0,1,1.61,3.8,47.83,47.83,0,0,0,5.17.83,47.16,47.16,0,0,0,13.43-1c8.2-1.92,20.53-8.62,20.53-8.62a63.12,63.12,0,0,1-19.49-.25c-10.83-2-15.33-5.1-20.76-9.18s-8.16-7.61-16.89-13.73c-8.46-5.94-17.26-7.48-24-8.23a103.32,103.32,0,0,0-13.65-.47,59.83,59.83,0,0,1,7.26-1.81,44.35,44.35,0,0,1,20.43,1.92c12.83,4.4,16.54,8.21,23.73,14,10.22,8.27,12.41,10.05,23.12,12.06,15.16,2.84,22.19,1.11,29.57-2.78-9.12.69-17.72-2.93-22.8-5.82a41.65,41.65,0,0,1-14.31-14.53,41.48,41.48,0,0,1-4-10.28c-.46.07-.93-.18-1.4-1-.9-.17-3.59-1.59-2.8-3,.52-.94,3.63.79,4.27.6.34-.1,1.23-2.71,1.9-3.19,1.77-1.29,1.34.91,1,2a11.74,11.74,0,0,1-2.19,4.16c1.26,2.31,3,5.49,4.52,7.76a40.78,40.78,0,0,0,10.73,11.63,48.77,48.77,0,0,0,15.26,6.9c5.55,1.36,10.5,1.21,18.72-.73,3.62-1.85,19.08-10.35,24.05-12.53s8.1-3.35,9.81-3.89c.68-.22,4.55-1.11,4.55-1.11l-6.53,14.63a29.61,29.61,0,0,0-4,.78c-2.49.91-7.55,3.1-7.86,3.23C162
520表白神器特效代码.rar （22个子文件） 
520表白神器特效代码 520表白神器特效代码 js 
canvas_bg.js 4KB main.js 3KB TweenMax.min.js 112KB jquery-1.10.2.js 91KB img 
2.jpg 5KB
musicP.png 2KB 10.jpg 7KB 6.jpg 6KB 1.jpg 7KB 12.jpg 4KB 5.jpg 6KB 8.jpg 8KB musicS.png 2KB 11.jpg 8KB love.mp3 83KB 3.jpg 7KB 7.jpg 4KB 9.jpg 5KB CSS.css 2KB 4.jpg 5KB
index.html 173KB
动画000001.gif 3.19MB资源评论
