这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
(文章目录)
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!--
* @Author: your name
* @Date: 2021-06-09 10:07:25
* @LastEditTime: 2021-06-09 10:30:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \canvas烟花html5动画\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>满屏烟花3D相册</title>
<link rel="stylesheet" href="css/style.css" />
<!-- 播放器css -->
<link rel="stylesheet" href="css/common.css" />
<!-- 相册css -->
<link type="text/css" href="css/photo.css" rel="stylesheet" />
</head>
<script
id="jqbb"
src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
></script>
<body>
<!-- 播放器 -->
<div id="app">
<div class="container_player">
<div class="music-box">
<!-- 音乐图片 -->
<img src="img/01.png" />
<div class="mask">
<div class="mplayer" onclick="play()">
<i class="fa">
<span class="before"></span>
<span class="after"> </span>
</i>
<svg
class="loadingSvg"
width="25"
height="25"
viewBox="0,0,50,50"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<circle></circle>
</svg>
</div>
<div class="m-circle m-progress">
<svg width="163" height="163" viewBox="0,0,163,163">
<circle
cx="81"
cy="81"
r="159"
stroke-width="8"
stroke="rgba(255, 206, 113, 0.2)"
fill="rgba(0,0,0,.2)"
></circle>
<circle
class="a"
cx="81"
cy="81"
r="159"
stroke-width="6"
stroke="rgba(255, 206, 113, 1)"
fill="none"
stroke-dasharray="0 999"
transform="matrix(0,-1,1,0,0,163)"
></circle>
</svg>
</div>
<div class="m_time">
<span class="mplayer_curtime">00:00</span>
<span class="m-join">/</span>
<span class="mplayer_durtime">00:00</span>
</div>
</div>
</div>
</div>
</div>
<!-- 音乐 -->
<audio id="myAudio" src="music/yinyue.mp3"></audio>
<!-- 相册 S -->
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 相册 E -->
<!-- 打字 -->
<div class="typing">
<!-- 字幕 -->
<h2 class="header-sub-title" id="word"></h2>
<h2 class="header-sub-title blink">|</h2>
</div>
<!-- 烟花 -->
<canvas></canvas>
<script>
// 打印字
const words = [
"❤2021.5.20与你相爱 1314天~",
"❉你的微笑,是我这辈子见过最美的景色。",
"❉我想收藏这样的风景一辈子。",
"❉我的人生放荡不羁,不曾为谁停留,",
"❉但自从遇到你,我会用余生来守护你。",
"❉我不想做你人生的插曲,",
"❉我想成为你一生的主题曲。",
"❤我爱你❤。",
];
let i = 0;
let timer;
// 速度
let deleteDelay = 3000;
let typeSpeed = 100;
let delSpeed = 50;
/* 开始编写文字 */
function typingEffect() {
let word = words[i].split("");
var loopTyping = function () {
if (word.length > 0) {
document.getElementById("word").innerHTML += word.shift();
} else {
delay(function () {
deletingEffect(); // do stuff
}, deleteDelay); // end delay
// deletingEffect();
return false;
}
timer = setTimeout(loopTyping, typeSpeed);
};
loopTyping();
}
function deletingEffect() {
let word = words[i].split("");
var loopDeleting = function () {
if (word.length > 0) {
word.pop();
document.getElementById("word").innerHTML = word.join("");
} else {
if (words.length > i + 1) {
i++;
} else {
//重复
i = 0;
}
typingEffect();
return false;
}
timer = setTimeout(loopDeleting, delSpeed);
};
loopDeleting();
}
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
/* 开始编写文字 */
typingEffect();
</script>
<script src="js/index.js"></script>
<script src="js/common.js"></script>
</body>
</html>
2.CSS代码
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li {
list-style: none;
}
.box {
z-index: 999999 !important;
width: 200px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
position: fixed !important;
top: 42%;
left: 40%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(13deg);
-webkit-animation: move 5s linear infinite;
}
.minbox {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 30px;
-webkit-transform-style: preserve-3d;
}
.minbox li {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
.minbox li:nth-child(1) {
background: url(../img/01.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {
background: url(../img/02.png) no-repeat 0 0;
-webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
background: url(../img/03.png) no-repeat 0 0;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
background: url(../img/04.png) no-repeat 0 0;
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
background: url(../img/05.png) no-repeat 0 0;
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
background: url(../img/06.png) no-repeat 0 0;
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {
background: url(../img/1.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {
background: url(../img/2.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {
background: url(../img/3.png) no-repeat 0 0;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {
background: url(../img/4.png) no-repeat 0 0;
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {
background: url(../img/5.png) no-repeat 0 0;
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {
background: url(../img/6.png) no-repeat 0 0;
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
-webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1) {
-webkit-transform: translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move {
0% {
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(13deg) rotateY(360deg);
}
}
/* 雪花css */
.snowLayer {
position: absolute;
left: -400px;
top: -400px;
height: 2000px !important;
overflow: hidden;
}
.blink {
animation: blink 0.5s infinite;
animation-delay: 500ms;
}
@keyframes blink {
to {
opacity: 0;
}
}
.typing {
display: flex;
top: 10%;
left: 4%;
z-index: 999999 !important;
position: fixed !important;
}
.header-sub-title,
h2 {
font-weight: 600;
font-size: 40px;
color: skyblue;
padding-right: 0.1em;
text-transform: uppercase;
}
三、精彩专栏
看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。 【主页——🚀获取更多优质源码】