这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 强制让文档与设备的宽度保持1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="css/animate.css">
<style>
* {
margin: 0;
padding: 0;
/*border: 1px solid red;*/
}
html,
body {
height: 100%;
}
.img8_10 {
position: absolute;
width: 220%;
height: 25%;
top: 25%;
left: 10%;
opacity: 0;
}
.img8_11 {
background: url(images/daoxibeijing.jpg);
position: absolute;
width: 70%;
height: 10%;
top: 52%;
left: 15%;
opacity: 0;
}
.img8_11_1 {
position: absolute;
width: 100%;
height: 90%;
top: 0%;
left: 0%;
/*opacity: 0;*/
}
.img_hengxian1 {
background: url(images/hengxian.png);
background-size: 100% 100%;
position: absolute;
width: 70%;
height: 5%;
top: 47%;
left: 15%;
opacity: 0;
}
.img_hengxian2 {
background: url(images/hengxian.png);
background-size: 100% 100%;
position: absolute;
width: 70%;
height: 5%;
top: 62%;
left: 15%;
opacity: 0;
}
.wenzi3 {
position: absolute;
width: 100%;
height: 10%;
top: 72%;
left: 0%;
text-align: center;
font-size: 16px;
color: #fff;
opacity: 0;
}
.btn {
background: url(images/bgmBtn.svg);
background-size: 100% 100%;
position: absolute;
width: 30px;
height: 30px;
top: 6%;
right: 6%;
z-index: 999;
}
.btnonclick {
animation: circle 1s infinite linear;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="btn"></div>
<audio id="video" autoplay src="http://res1.eqh5.com/o_1aj4i1djr340g3h1v2t1e6j1vga9.mp3"></audio>
<div class="swiper-wrapper">
<div class="swiper-slide section1">
<img class="img1_1" src="images/1-2.png">
<img class="img1_2" src="images/1_biankuang.png">
<img class="img1_3" src="images/1-1.png">
<img class="img1_4" src="images/shuye_1.png">
<img class="img1_5" src="images/shuye_2.png">
<img class="img1_6" src="images/shuye_4.png">
<img class="img1_7" src="images/shuye_2.png">
<img class="img1_8" src="images/shuye_3.png">
<img class="img1_9" src="images/xiaozhenbao.png">
<img class="img1_10" src="images/yaoqinghan.png">
<img class="img1_11" src="images/yingwenzi.png">
</div>
<div class="swiper-slide section2">
<img class="img2_1" src="images/ertubeijing.jpg" alt="">
<div class="img2_2"></div>
<div class="img2_3">
<span id="content1" style="white-space:pre">
</div>
<img class="img2_4" src="images/ertuhua.png" alt="">
</div>
<div class="swiper-slide section3">
<img class="img3_1" src="images/santubeijing.png" alt="">
<div class="img3_2">
<ul style="height:100%;">
<li style="font-size: 64px;color: rgb(171, 124, 68);">丰盛/美好</li>
<li style="font-size: 20px;color:rgb(2, 21, 120);height:10%;">我们用<span style="font-weight: bold;">工匠</span>精神</li>
<li style="line-height: inherit; font-size: 12px; background-color: initial; color: rgb(207, 157, 83);"><span id="content2" style="white-space:pre"></span></li>
<li style="font-size: 20px;font-family: fangzheng_sht;;color:rgb(2, 21, 120);">是人生中最幸福的滋味</li>
<li><img style="width:70%" src="images/santuwenzia.png" alt=""></li>
<br>
<li style="font-size: 20px; font-family: fangzheng_fst;color:rgb(2, 21, 120);">烹调精致美食</li>
<li><img style="width:30%" src="images/santuwenzib.png" alt=""></li>
<li><img style="width:70%" src="images/santuwenzic.png" alt=""></li>
<li><img class="img3_3" src="images/santudi.png" alt=""></li>
</ul>
</div>
</div>
<div class="swiper-slide section4">
<img class="img4_1" src="images/santubeijing.png" alt="">
<img class="img4_10" src="images/4-1.png" alt="">
g">
<img class="img8_7" src="images/shuye_2.png">
<img class="img8_8" src="images/shuye_3.png">
<div class="wenzi1">
<span class="wenzi8_1">珍<br>贵<br>的<br>你</span>
</div>
<div class="wenzi2">
<span class="wenzi8_2">久<br>等<br>了</span>
</div>
<img class="img8_9" src="images/xiaozhenbao3.png" alt="">
<img class="img8_10" src="images/521.png" alt="">
<div class="img8_11">
<img class="img8_11_1" src="images/daoxi.png" alt="">
</div>
<div class="img_hengxian1"></div>
<div class="img_hengxian2"></div>
<div class="wenzi3"><span>邀请你与我共享美食(只限观看的你</span></div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/typed.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
// loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
onInit: function(swiper) {
//Swiper初始化了
//alert(swiper.activeIndex);提示Swiper的当前索引
console.log("onInit" + swiper.activeIndex);
$(".img1_2").addClass("biankuang").css("opacity", 0.5);
$(".img1_3").addClass("tu1").css("opacity", 1);
$(".img1_4").addClass("yezia").css("opacity", 1);
$(".img1_5").addClass("yezib").css("opacity", 1);
$(".img1_6").addClass("yezic").css("opacity", 1);
$(".img1_7").addClass("yezid").css("opacity", 1);
$(".img1_8").addClass("yezie").css("opacity", 1);
$(".img1_9").delay(3000).fadeIn();
$(".img1_10").delay(4000).fadeIn();
$(".img1_11").delay(3500).fadeIn();
}, 0, function() {
$(this).addClass("leftin2");
});
$(".img4_6").delay(1500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("leftin3");
});
$(".img4_8").delay(2000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("leftin3");
});
$(".img4_9").delay(2500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("leftin3");
});
break;
case 4:
$(".img5_8").addClass("fadeInDown animated");
$(".img5_2").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInUp animated");
});
$(".img5_3").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInUp animated");
});
$(".img5_5").delay(1500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInUp animated");
});
$(".img5_7").delay(2000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInUp animated");
});
break;
case 5:
$(".img6_2").addClass("fadeInLeft animated");
$(".img6_3").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_4").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_6").delay(1500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_8").delay(2000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_9").delay(2000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_10").delay(2500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
$(".img6_11").delay(2500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInRight animated");
});
break;
case 6:
$(".img7_1").addClass("fadeInUp animated");
$(".img7_2").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInDown animated");
});
$(".img7_3").delay(1000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInDown animated");
});
$(".img7_5").delay(1500).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInDown animated");
});
$(".img7_7").delay(2000).animate({
"opacity": 1
}, 0, function() {
$(this).addClass("fadeInDown animated");
});
break;
case 7:
$(".img8_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);
$(".img8_3").stop(true, true).addClass("tu1").css("opacity", 1);
$(".img8_4").stop(true, true).addClass("yezia").css("opacity", 1);
$(".img8_5").stop(true, true).addClass("yezib").css("opacity", 1);
$(".img8_6").stop(true, true).addClass("yezic").css("opacity", 1);
$(".img8_7").stop(true, true).addClass("yezid").css("opacity", 1);
$(".img8_8").stop(true, true).addClass("yezie").css("opacity", 1);
$(".wenzi1").stop(true, true).delay(3000).animate({
opacity: 1
}, 0, function() {
$(this).addClass("fadeIn animated");
}).delay(1000).animate({
opacity: 0
}, 1000, function() {
$(this).removeClass("fadeIn animated");
});
$(".wenzi2").stop(true, true).delay(5500).animate({
opacity: 1
}, 0, function() {
$(this).addClass("fadeIn animated");
}).delay(1000).animate({
opacity: 0
}, 1000, function() {
$(this).removeClass("fadeIn animated");
$(".img8_9").stop(true, true).delay(1000).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
$(".img8_10").stop(true, true).delay(1500).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
$(".img8_11").stop(true, true).delay(2500).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
$(".img_hengxian1").stop(true, true).delay(2000).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
$(".img_hengxian2").stop(true, true).delay(3000).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
$(".wenzi3").stop(true, true).delay(3500).animate({
opacity: 1
}, 0, function() {
$(this).fadeIn();
});
});
break;
}
},
onSlideChangeStart: function(swiper) {
if (swiper.activeIndex != 0) {
$(".img1_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
$(".img1_3").stop(true, true).removeClass("tu1").css("opacity", 0);
$(".img1_4").stop(true, true).removeClass("yezia").css("opacity", 0);
$(".img1_5").stop(true, true).removeClass("yezib").css("opacity", 0);
$(".img1_6").stop(true, true).removeClass("yezic").css("opacity", 0);
$(".img1_7").stop(true, true).removeClass("yezid").css("opacity", 0);
$(".img1_8").stop(true, true).removeClass("yezie").css("opacity", 0);
$(".img1_9").stop(true, true).fadeOut();
$(".img1_10").stop(true, true).fadeOut();
$(".img1_11").stop(true, true).fadeOut();
}
if (swiper.activeIndex != 1) {
$(".img2_1").stop(true, true).css("left", "0%");
$(".img2_2").stop(true, true).css("display", "none").css("left", "75%");
$("#content1").fadeOut();
$(".img2_4").stop(true, true).animate({
left: "100%"
});
}
if (swiper.activeIndex != 2) {
$(".img3_2").children().children().eq(0).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(3).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(1).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(5).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(4).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(6).stop(true, true).css("opacity", 0);
$(".img3_2").children().children().eq(7).stop(true, true).css("opacity", 0).removeClass("bounceInDown animated");
$(".img3_2").children().children().eq(8).stop(true, true).css("opacity", 0).removeClass("shake animated");
$(".img3_2").children().children().eq(2).css("opacity", "0");
$("#content2").fadeOut();
}
if (swiper.activeIndex != 3) {
$(".img4_10").stop(true, true).removeClass("rightin1").css("opacity", 0);
$(".img4_11").stop(true, true).removeClass("rightin2").css("opacity", 0);
$(".img4_2").stop(true, true).removeClass("leftin1").css("opacity", 0);
$(".img4_3").stop(true, true).removeClass("leftin1").css("opacity", 0);
$(".img4_5").stop(true, true).removeClass("leftin2").css("opacity", 0);
$(".img4_6").stop(true, true).removeClass("leftin3").css("opacity", 0);
$(".img4_8").stop(true, true).removeClass("leftin3").css("opacity", 0);
$(".img4_9").stop(true, true).removeClass("leftin3").css("opacity", 0);
}
if (swiper.activeIndex != 4) {
$(".img5_8").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
$(".img5_2").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
$(".img5_3").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
$(".img5_5").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
$(".img5_7").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
}
if (swiper.activeIndex != 5) {
$(".img6_2").stop(true, true).removeClass("fadeInLeft animated").css("opacity", 0);
$(".img6_3").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_4").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_6").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_8").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_9").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_10").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
$(".img6_11").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
}
if (swiper.activeIndex != 6) {
$(".img7_1").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
$(".img7_2").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
$(".img7_3").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
$(".img7_5").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
$(".img7_7").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
};
if (swiper.activeIndex != 7) {
$(".img8_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
$(".img8_3").stop(true, true).removeClass("tu1").css("opacity", 0);
$(".img8_4").stop(true, true).removeClass("yezia").css("opacity", 0);
$(".img8_5").stop(true, true).removeClass("yezib").css("opacity", 0);
$(".img8_6").stop(true, true).removeClass("yezic").css("opacity", 0);
$(".img8_7").stop(true, true).removeClass("yezid").css("opacity", 0);
$(".img8_8").stop(true, true).removeClass("yezie").css("opacity", 0);
$(".wenzi1").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
$(".wenzi2").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
$(".img8_9").stop(true, true).css("opacity", 0).fadeOut();
$(".img8_10").stop(true, true).css("opacity", 0).fadeOut();
$(".img8_11").stop(true, true).css("opacity", 0).fadeOut();
$(".img_hengxian1").stop(true, true).css("opacity", 0).fadeOut();
$(".img_hengxian2").stop(true, true).css("opacity", 0).fadeOut();
$(".wenzi3").stop(true, true).css("opacity", 0).fadeOut();
}
}
// 如果需要前进后退按钮
// nextButton: '.swiper-button-next',
// prevButton: '.swiper-button-prev',
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
// onSlideChangeEnd: function(Swiper) {
// // console.log(swiper.activeIndex);
// switch (swiper.activeIndex) {
// case 0:
// // $(".img1_4").addClass("yezi");
// console.log(111);
// // alert(111);
// break;
// }
// },
})
$(function() {
var video = document.getElementById("video");
$(".btn").addClass("btnonclick");
$(".btn").click(function() {
if (video.paused) {
video.play();
$(".btn").addClass("btnonclick");
} else {
video.pause();
$(".btn").removeClass("btnonclick");
}
})
})
</script>
</body>
</html>
2.CSS代码
<style>
@media screen and (max-width:540px) {
.swiper-container {
width: 100%;
height: 100%;
}
}
</style>