520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？ 快来制作高端大气上档次的表白网页吧
尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。
表白作品介绍1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!
2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）
3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、HTML添加了背景音乐(可自定义更换),。
文章目录
一、作品演示
1.PC端电脑端(演示)
>>>点击进入>>>100款❤表白源码演示地址
2.H5手机端(演示)
1.这个单页面源码，是一位程序员精心为女朋友而制作的，有需要的朋友就可以修改下源码就可以送给心爱的她一个不一样的虚拟礼物了。
2.整个布局很不错，手机端和电脑端显示都很好，我也很喜欢，添加了背景音乐 / 自动切换虚幻背景 / 自动轮播相册 / 视频播放等，背景音乐也可以弄成你想说的话，或者自己唱的歌。这样也是很不错的。
html星空背景(部分)
音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹 更换即可~ 戳我>>>免费下载MP3
注意: 下载后的音乐文件需要修改名称 和mp3文件夹里的 520.mp3 的名字保持一致即可
<audio controls autoplay>
<!-- 音乐播放 -->
<source src="mp3/Approaching%20Nirvana%20-%20You.mp3">
</audio>
<!-- 星空背景S -->
<div style="position:fixed;width: 100%;height:100%;top:0;">
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
</div>
<!-- 星空背景E -->
html 3D相册(部分)
制作教程: 准备6-10张相片效果最好
相册替换: 找到 img 文件夹 替换相片即可
注意: 相片后缀为.jpg
<!-- 3D旋转相册 -->
<div id="drag-container">
<div id="spin-container">
<!-- 相片 可以放多张 6-10张合适-->
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<!-- 可放外链图片 -->
<!-- <a target="_blank" href="img/pexels-photo-139829.jpeg">
<img src="img/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</a> -->
<!-- 告白视频 -->
<!-- <video controls autoplay="autoplay" loop>
<source src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4">
</video> -->
<!-- 告白文字-->
<p>520-❤-小倩</p>
</div>
<div id="ground"></div>
</div>
css 星空(部分)
这段代码 background: url("../bgimg/bg8.jpg") no-repeat; 为第一次显示的背景图 可自行更换
更换教程:需要找到bgimg文件夹下的背景图, 或者添加你想要的背景图片会即可
html,
body {
margin: 0;
padding: 0;
}
audio {
position: absolute;
bottom: 0;
opacity: 0.1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
div#background {
background: url("../bgimg/bg8.jpg") no-repeat;
-webkit-animation: dd 100s linear infinite;
-moz-animation: dd 100s linear infinite;
-o-animation: dd 100s linear infinite;
animation: dd 100s linear infinite;
}
div#midground {
background: url("../bgimg/midground.png");
z-index: 1;
-webkit-animation: cc 100s linear infinite;
-moz-animation: cc 100s linear infinite;
-o-animation: cc 100s linear infinite;
animation: cc 100s linear infinite;
}
div#foreground {
background: url("../bgimg/foreground.png");
-webkit-animation: cc 153s linear infinite;
-o-animation: cc 153s linear infinite;
-moz-animation: cc 153s linear infinite;
animation: cc 153s linear infinite;
}
@-webkit-keyframes cc {
from {
background-position: 0 0;
}
to {
background-position: 600% 0;
}
}
@-o-keyframes cc {
from {
background-position: 0 0;
transform: translateY(105px);
}
to {
background-position: 600% 0;
}
}
Javascript 自动切换背景图(部分)
自动切换背景时间:默认为600, 也就是6毫秒 如需修改时间 将600修改成1000 也就是1秒 2000 就是2秒....
num = 10;
$(function() {
let count = 0
setInterval(function() {
if (num < 100) {
num += 10;
numT = num + '%';
} else {
num = -10;
/* 背景切换 */
if (count < 2) {
count++;
} else if (count >= 2&&count < 4) {
/* 背景图 */
$('div').find('#background').css('background', 'url(bgimg/bg1.jpg) no-repeat');
count++;
}
else if (count >= 4&&count < 6) {
/* 背景图 */
count++;
$('div').find('#background').css('background', 'url(bgimg/bg2.jpg) no-repeat');
}
else if (count >= 6&&count< 8) {
/* 背景图 */
count++;
$('div').find('#background').css('background', 'url(bgimg/bg3.jpg) no-repeat');
}
else if (count >= 8) {
/* 背景图 */
count = 0;
$('div').find('#background').css('background', 'url(bgimg/bg4.jpg) no-repeat');
}
}
}, 600);
})
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
