<!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资源评论
马coder
- 粉丝: 1248
- 资源: 6593
最新资源
- 重庆城市充电桩投建数据集.zip
- BUCK\BOOST电路设计电感值计算表
- 亚控SCADA赋能半导体行业自主可控
- 足球人员检测22-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 【4G DTU方案】STM32F103单片机驱动EC200S-4G模块通过HTTP协议发送MODBUS传感器变送器数据到私有物联网云平台代码（程序仅供参考，不提供私有平台及相关资料）
- python-微信小程序-轻客洗衣.zip
- 新能源汽车销量数据.zip
- 珍爱网相亲数据.zip
- Web渗透测试中Upload-Labs的关卡解析与实践技巧
- 交互可视化期末大作业基于ipynb实现的气候变化和世界森林面积的变化可视化分析项目源代码+数据
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
