❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
58-一起跨年(表白)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2020年跨年快乐❤️</title>
<script>
//判断客户端设备，选择写入meta
function init_viewport(){
if(navigator.userAgent.indexOf('Android') != -1){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
var phoneScale = parseInt(width)/500;
document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
}
}else if(navigator.userAgent.indexOf('iPhone') != -1){
var phoneScale = parseInt(window.screen.width)/500;
document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> '); //0.75 0.82
}else{
document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75 0.82
}
}
init_viewport();
</script>
<style>
* {
padding: 0px;
margin: 0px;
-webkit-box-sizing: border-box;
}
body {
background-color: white;
}
a {
color: white;
text-decoration: none;
}
#div_container { /*最外层div，用于居中兼容PC和移动*/
width: 500px;
margin: 0px auto;
position: relative;
/*background-color: #FAFAFA;*/
font-size: 1em;
}
.div_pure_words { /*文字部分的最外层，用于定位*/
position: relative;
display: none;
}
.div_pure_words_bg { /*背景设置在这里*/
background-repeat: repeat;
background-size: 100%;
background-attachment: fixed;
width: 500px;
min-height: 500px;
}
.div_pure_words_height {
visibility: hidden;
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
white-space: pre-wrap; /*保留换行效果*/
font-size: 1.1em;
font-family: "Microsoft YaHei","Arial";
color: white;
}
.div_pw_typed {
position: absolute;
left: 0;
right: 0; /*4个方向定位使div充满整个画画*/
top: 0;
bottom: 0; /*4个方向定位使div充满整个画画*/
width: 500px;
background:rgba(255,255,255,0.8); /*半透明效果*/
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
}
#span_pw_typed {
width:100%; /*为了使文字两端对齐 */
white-space:pre-wrap; /*保留换行效果*/
font-size: 1.1em;
font-family: "Microsoft YaHei","Arial";
}
#div_start_bg{
width: 100%; height: 100%;
position: absolute;
left: 0px; top: 0px;
z-index: 44;
background-color: white;
}
</style>
<!-- 按钮部分的样式 -->
<link type="text/css" rel="stylesheet" href="css/theme_public_btn.css">
<!-- 按需加载，选择此片头时方才加载 -->
<link type="text/css" rel="stylesheet" href="css/start_intersect.css">
</head>
<body>
<div id="div_container"> <!-- 最外层div，用于居中兼容PC和移动 -->
<div id="div_start_bg"></div> <!-- 用于遮挡主题，作为片头的背景 -->
<!-- 按需加载，选择此片头时方才加载 -->
<!-- 按需加载，选择此片头时方才加载 -->
<div id="div_intersect"><!-- 用于设置背景 -->
<div id="div_is_inner"><!-- 用于存放content -->
<div class="div_is_open_bg">
<div class="div_is_open_btn" onclick="init_is_typed()"></div>
</div>
<!-- 画布在这里 -->
<canvas id="canvas_is"></canvas>
<!-- 打字在这里 -->
<div class="div_is_typed">
<div id="div_is_img">
<img class="img_is_typed">
</div>
<span id="span_is_typed"></span>
</div>
</div>
</div>
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<div class="div_pure_words"> <!-- 文字部分的最外层，用于定位 -->
<div class="div_pure_words_bg"><!-- 背景设置在这里 -->
<div class="div_pure_words_height">
<!-- 正文的内容复制到这里面，撑开整个文档的高度 -->
</div>
</div>
<div class="div_pw_typed"> <!-- 正文部分，绝对定位 -->
<span id="span_pw_typed"></span>
</div>
</div>
<div id='div_btn_container'> <!-- 按钮部分的最外层，处于文档流之中 -->
<div id="div_btn_inner"> <!-- 按钮部分内层，用于定位 -->
<div class='div_music_tips'></div>
<div class="div_btn" id="div_music" onclick="music_switch()"> <!-- 音乐按钮部分 -->
<img id='img_music' src='/images/music_note_big.png' style='-webkit-animation:music_play_rotate 1s linear infinite'>
<audio id="audio_music" autoplay="autoplay" loop="loop">
<source type="audio/mpeg"/>
<!-- 您的浏览器不支持播放音乐 -->
</audio>
</div>
<div class='div_record_tips'></div>
<div class="div_btn" id="div_record" onclick="record_switch()"> <!-- 录音按钮部分 -->
语音
<audio id="audio_record" loop="loop">
<source type="audio/mpeg"/>
<!-- 您的浏览器不支持播放音乐 -->
</audio>
</div>
<!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
<div class="div_btn" id='div_support'>
<a href="https://www.gwents.com/tag/%e8%a1%a8%e7%99%bd%e6%ba%90%e7%a0%81"><span>更多</span></a>
</div>
<!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
<!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
<!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
</div>
</div>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="js/support_upload_as.js"></script>
<script src="js/jweixin-1.2.0.js"></script>
<script>
var window_height=$(window).height();
console.log('window_height ->'+window_height);
var theme='pure_words';
console.log('theme ->'+theme);
var theme_content={"pure_words_content":"\u4e16\u754c\u8fd9\u4e48\u5927\u2764\ufe0f\r\n\u800c\u6211\u771f\u6b63\u60f3\u843d\u811a\u7684\u5730\u65b9\u662f\u4f60\u7684\u8eab\u65c1\r\n\r\n\u5982\u679c\u4f60\u662f\u4e09\u90a3\u6211\u4e00\u5b9a\u662f\u4e5d\u2764\ufe0f\r\n\u4f60\u77e5\u9053\u4e3a\u4ec0\u4e48\u5417?\u56e0\u4e3a\u6211\u9664\u4e86\u4f60\u8fd8\u662f\u4f60\u2764\ufe0f\r\n","typed_bool":"typed_y","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"13.jpg","simple_page_content":"","video_page_content":""};
console.log(theme_content);
var music_json={"music_select":"m_online","m_online_id":"6","m_online_url":"http://music.163.com/song/media/outer/url?id=1412430003.mp3","m_upload_name":"null","m_upload_url":"null"};
console.log(music_json);
var record_json={"record_bool":"r_false","r_wechat_time":"null","r_wechat_url":"null","r_wechat_amr":"null"};
console.log(record_json);
var signPackage={"appid":"wx47f716bdd7699533","timestamp":1577533642,"nonceStr":"4uf5JH8gLZx2oSYN","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdml21m","signature":"26b52c017a5dad1cfaa527b16f32ad6cd7fca23a","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7AXf4KYX5l3Aku_9253FlC9OXF1HGSZbw6z2aOD5ti-qQ&noncestr=4uf5JH8gLZx2oSYN×tamp=1577533642&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdml21m"};
var main_title='2020年跨年快乐❤️';
// console.log(main_title);
if(main_title=='' || main_title=='null'){ //允许标题为空
document.title='慢慢喜欢你';
}
// console.log("");
var pure_words_content=theme_content['pure_words_content'];
var str_cursorChar;
var typed_bool;
var interval_pw_height;
var height_div_pw=$(".div_pure_words_height").height();
function init_pure_words(){
//允许内容为空时直接展示，不设置为随机内容，用于空主题
if(typeof(pure_words_content)=='undefined'){ //处理全新作品
var array_str_temp=[];
random_text_array(array_str_temp,12); //获取随机的模板文字
// array_str_temp.push('你现在看到的只是案例，文字是可以自定义哒，6000字以下');
pure_words_content=array_str_temp.join('\r\r');
}
$(".div_pure_words_height").html(pure_words_content+'22222'); //初始化复制内容，撑开文档高度
// 初始化设置div的bg图片 初始化设置div的bg图片
if(typeof(theme_content['bg_style_pure_words'])!='undefined' && theme_content['bg_style_pure_words']=='bg_opacity'){
if(typeof(theme_content['bg_img'])!='undefined' && theme_content['bg_img']!=''){
$(".div_pure_words_bg").css({"background-image": "url("+theme_content['bg_img']+")"});
}
}
//以下是打字效果的js
if(typeof(theme_content['cursor_char'])!='undefined' && theme_content['cursor_char']!=''){
switch(theme_content['cursor_char']){ //设置打字光标的样式
case 'cursor_heart':
str_cursorChar='❤';
break;
case 'cursor_sub':
str_cursorChar='_';
break;
case 'cursor_music':
str_cursorChar='♫';
break;
case 'cursor_star':
str_cursorChar='★';
break;
case 'cursor_sun':
str_cursorChar='☀';
break;
default:
str_cursorChar='|';
}
}else{ //处理全新作品，默认显示打字效果
str_cursorChar='❤';
}
//判断用户有没有选择打字效果
if(typeof(theme_content['typed_bool'])!='undefined' && theme_content['typed_bool']!=''){
typed_bool= theme_content['typed_bool']=='typed_y' ? true : false;
}else{
typed_bool=false; //默认显示打字效果
}
// console.log(typed_bool);
display_pure_words();
$(".div_pure_words").fadeIn();
interval_pw_height=setInterval(function(){
console.log('div_pure_words_height -> '+$('.div_pure_words_height').height());
var least_height_div_pw=$('.div_pure_words_height').height();
if(least_height_div_pw>height_div_pw){
height_div_pw=least_height_div_pw;
}else{
clearInterval(interval_pw_height);
$(".div_pure_words_height").height(least_height_div_pw+100);
if($(".div_pure_words_height").height()<window_height){
$(".div_pure_words_height").height(window_height); //不能小于窗口的高度
console.log('let us be high as window');
}
}
},100);
}
function display_pure_words(){
if(typed_bool){
var typed_pure_words = new Typed('#span_pw_typed', {
strings: [pure_words_content], //输入内容, 支持html标签
typeSpeed: 120, //打字速度
cursorChar: str_cursorChar,//替换光标的样式
contentType: 'html', //值为html时，将打印的文本标签直接解析html标签
onComplete: function(abc){
// console.log(abc);
console.log('finished typing words');
// console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
},
});
}else{
//如果不需要打字效果就直接显示
$("#span_pw_typed").html(pure_words_content).fadeIn();
}
init_attachment();
}
function random_text_array(temp_array,length){ //获取随机的模板文字
console.log('random_text_array');
var random_array=[];
while(random_array.length<length){
// var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;
var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值
if(random_array.indexOf(random_num)==-1){
random_array.push(random_num);
}
}
// console.log(random_array);
for(var i=0; i<length; i++){
temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板文字
}
}
</script>
<!-- 按需加载，选择此片头时方才加载 -->
<script>
var start_content={"hearttree_text":"\u5c0f\u751f\u4e0d\u624d\r\n\u4ef0\u6155\u59d1\u5a18\u5df2\u4e45\r\n\u6562\u95ee\u59d1\u5a18\u5fc3\u7cfb\u8c01\u5bb6\uff1f\r\n\u5018\u82e5\u59d1\u5a18\u4e0d\u5f03\r\n\u5c0f\u751f\u613f\u6276\u59d1\u5a18\u4e0a\u90a3\u82b1\u8f7f\r\n\u5165\u6211\u5bb6\u95e8\r\n\u4f59\u751f\u643a\u59d1\u5a18\u770b\u90a3\u671d\u9633\u8d77\r\n\u5750\u66ae\u843d\r\n\u770b\u90a3\u96c1\u5357\u98de\uff0c\u6708\u4e0b\u9152\u5bf9\u996e\r\n\u5c82\u4e0d\u5feb\u54c9\uff1f\ud83d\ude02\ud83d\ude02 _","hearttree_desc":"\u2764\ufe0f\u2764\ufe0f","hearttree_time":"2019-12-18","hearttree_time_type":"hearttree_postive","bg_img":"13.jpg","img_src":"13.gif","intersect_text":"\u5f80\u4e8b\u6e05\u96f6\u7231\u6068\u968f\u610f\uff0c2020\u5e0c\u671b\u4f60\u6d3b\u7684\u5f00\u5fc3\uff0c\u4e0d\u7528\u56de\u5934\u4e0d\u518d\u5c06\u5c31\uff0c\u8fc7\u53bb\u6240\u6709\u7684\u9057\u61be\u90fd\u662f2020\u7684\u60ca\u559c\uff0c\u9047\u89c1\u4f60\u90fd\u662f\u5929\u610f\uff0c\u62e5\u6709\u4f60\u90fd\u662f\u5e78\u8fd02020\uff0c\u613f\u81ea\u5df1\u6709\u80fd\u529b\u7231\u4f60\u2764\ufe0f","cursor_char":"cursor_heart","bg_style":"bg_custom","img_bool":"img_true","courage_h1":"","courage_h2":"","courage_receiver":"","courage_text":["\u6700\u7f8e\u4e3d\u7684\u4e8b\uff0c\u83ab\u8fc7\u4e8e\u5728\u6700\u597d\u7684\u65f6\u5149\u9047\u89c1\u4f60\uff0c\u76f8\u4e92\u5acc\u5f03\uff0c\u5374\u53c8\u4e0d\u79bb\u4e0d\u5f03","\u4e0d\u662f\u56e0\u4e3a\u60f3\u604b\u7231\u624d\u9047\u89c1\u4f60\uff0c\u800c\u662f\u9047\u89c1\u4f60\u4e4b\u540e\u6211\u624d\u6709\u4e86\u604b\u7231\u7684\u60f3\u6cd5","\u6211\u77e5\u9053\u9047\u89c1\u4f60\u4e0d\u5bb9\u6613\uff0c\u9519\u8fc7\u4f1a\u5f88\u53ef\u60dc\uff0c\u6211\u4e0d\u5e0c\u671b\u4f59\u751f\u90fd\u662f\u56de\u5fc6\uff0c\u6211\u60f3\u4f59\u751f\u6bcf\u5929\u90fd\u662f\u4f60\uff0c\u6211\u7231\u4f60"]}; //可能为null
console.log(start_content);
var start_id;
$(function(){
//此事件为触发互动创意
start_id='intersect'; //可能为null
init_start(start_id);
});
function init_start(start_id){
console.log('init_start ->'+start_id);
switch(start_id){
case 'loveformat':
$('.div_loveformat').show();
init_loveformat();
break;
case 'hearttree':
$('#div_hearttree').show();
init_hearttree();
break;
case 'courage':
$('#div_courage').show();
init_courage();
break;
case 'birthdaycake':
$('#div_dbcake').show();
init_birthdaycake();
break;
case 'intersect':
$('#div_intersect').show();
init_intersect();
break;
case 'onlyyou':
$('#div_onlyyou').show();
init_onlyyou();
break;
default:
init_theme();
}
}
//开始动画主体部分
function init_theme(){
console.log('init_theme');
$('#div_start_bg').fadeOut();
init_pure_words();
}
</script>
<!-- 按需加载，选择此片头时方才加载 -->
<script src="js/start_intersect.js"></script>
<script>
var attachment='null'; //可能为null
var attached_content={"bool_save":false}; //可能为null
console.log(attached_content);
function init_attachment(){ //开始attachment
console.log('init_attachment ->'+attachment);
switch(attachment){
case 'timer':
init_at_timer();
break;
default:
return;
}
}
</script>
<script src='js/jweixin-1.2.0.js'></script>
<script src='js/theme_common.js'></script> <!-- 音乐控制和微信设置等公共部分js外部引入 -->
</body>
</html>
🏠CSS样式代码
#div_intersect {
position: relative;
width: 100%;
z-index: 666;
display: none;
background-repeat: repeat;
background-size: 100%;
overflow: hidden;
}
#div_is_inner {
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
width: 100%;
min-height: 160px;
background: rgba(255,255,255,.85);
}
#canvas_is {
position: absolute;
display: block;
margin: 0 auto;
}
.div_is_typed {
width: 500px;
position: absolute;
top: 0;right: 0;left: 0;bottom: 0;
z-index: 668;
-webkit-overflow-scrolling: touch;
padding: 10%;
font-size: 1.2em;
overflow: scroll;
}
#div_is_img {
width: 100%;
max-height: 320px;
object-fit: cover;
display: none;
overflow: hidden;
margin: 0px 0px 15px 0px;
background-color: white;
border: 15px solid white;
border-radius: 3px;
display: none;
}
#div_is_img img {
width: 100%;
}
.div_is_open_bg {
width: 500px;
display: block;
background-color: rgba(255, 255, 255, 0.85);
position: fixed;
z-index: 669;
}
.div_is_open_btn {
width: 100px;
height: 54px;
margin: 200px auto;
background-image: url('../images/open_letter.jpg');
border-radius:3px;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #999;
-webkit-box-shadow:0px 0px 10px #999;
box-shadow:0px 0px 10px #999;
animation-name: heartbeat;
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0,0,0,1.74);
animation-delay: 500ms;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes heartbeat {
0% {
transform: scale(0.95);
}
100% {
transform: scale(0.95);
}
50% {
transform: scale(1);
}
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
