0
点赞
收藏
分享

微信扫一扫

最炫表白网站html5源码_七夕程序员的十款表白源码_html+css+js

📂文章目录

  • ​​二、📚网站介绍​​
  • ​​三、🔗网站效果​​
  • ​​▶️1.视频演示​​
  • ​​🧩 2.图片演示​​
  • ​​四、💒 网站代码​​
  • ​​🧱HTML结构代码​​
  • ​​🏠CSS样式代码​​
  • ​​五、🎁更多源码​​

二、📚网站介绍

📒网站文件方面: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.视频演示

31-蓝色背景-3D相册

🧩 2.图片演示

最炫表白网站html5源码_七夕程序员的十款表白源码_html+css+js_dreamweaver

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>入我相思门,知我相思苦</title>
<link rel="icon" href="./image/ax.png" type="image/x-icon" />
<link rel="stylesheet" href="./css/iconfont.css" />
<link rel="stylesheet" href="./css/t.css" />
</head>

<body>
<canvas id="c"> </canvas>
<div class="snowback">
<div class="ziti" id="ziti">
<span id="world">山有木兮木有枝,心悦君兮君不知</span>
</div>
<div class="main">
<div class="box">
<ul class="zhoxian1">
<li class="small idv1"><img src="./image/img/111.jpg" alt="" /></li>
<li class="small idv2"><img src="./image/img/222.jpg" alt="" /></li>
<li class="small idv3"><img src="./image/img/333.jpg" alt="" /></li>
<li class="small idv4"><img src="./image/img/444.jpg" alt="" /></li>
<li class="small idv5"><img src="./image/img/555.jpg" alt="" /></li>
<li class="small idv6"><img src="./image/img/666.jpg" alt="" /></li>
</ul>
</div>
<div class="box-biger">
<ul class="zhoxian2">
<li class="biger idv7"><img src="./image/img/111.jpg" alt="" /></li>
<li class="biger idv2"><img src="./image/img/222.jpg" alt="" /></li>
<li class="biger idv3"><img src="./image/img/333.jpg" alt="" /></li>
<li class="biger idv4"><img src="./image/img/444.jpg" alt="" /></li>
<li class="biger idv5"><img src="./image/img/555.jpg" alt="" /></li>
<li class="biger idv12">
<img src="./image/img/666.jpg" alt="" />
</li>
</ul>
</div>
</div>
</div>

<div class="btn btnonlond" onClick="biggen()">
<img class="btnimg" src="./image/mypic.gif" alt="" />

<div class="hiddenbox">
<div class="audiobox">
<audio
class="myaudio"
src="./music/mp3/pygh.mp3"
autoplay
controls
loop
></audio>
</div>
<input type="text" placeholder="请输入音乐名称" />
<div class="btn inpbtn" onClick="inpbtnc()">放这个</div>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/snow.js"></script>
<script>var zhoxian = document.querySelector(".zhoxian1");
var zhoxian2 = document.querySelector(".zhoxian2");
var yesno = 1;
setInterval(function xuanzhuan() {
if (yesno > 2) {
var ss = Math.random();
if (ss < 0.5) {
leftbut();
} else {
rigthtop();
}
} else {
yesno++;
}
}, 500);

var ysize1 = 0,
xsize2 = 0;
rigthtop();

function rigthtop() {
var suiji = Math.random();
ysize1 += 1 * (suiji * 20).toFixed(0) + 20;
xsize2 += 1 * (suiji * 10).toFixed(0) + 10;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}

function leftbut() {
var suiji1 = Math.random();
ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;
xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}

function onlyleft() {
var suiji1 = Math.random();
ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}

function onlyright() {
var suiji = Math.random();
ysize1 += 1 * (suiji * 20).toFixed(0) + 20;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}

function onlytop() {
var suiji1 = Math.random();
xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}

function onlybtn() {
var suiji = Math.random();
xsize2 += 1 * (suiji * 10).toFixed(0) + 10;
var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;
zhoxian.style.transform = world;
zhoxian2.style.transform = world;
yesno = 0;
}
document.querySelector(".box-biger").onmousedown = function (evt) {
var oevent = evt || event;
var disx = oevent.clientX;
var disy = oevent.clientY;
document.onmousemove = function (evt) {
var oevent = evt || event;
evt.preventDefault();
tuozhuaiX = oevent.clientX - disx + "px";
tuozhuaiY = oevent.clientY - disy + "px";
};
document.onmouseup = function () {
if (
parseInt(tuozhuaiX) * parseInt(tuozhuaiX) >
parseInt(tuozhuaiY) * parseInt(tuozhuaiY)
) {
if (tuozhuaiX[0] == "-") {
onlyleft();
} else {
onlyright();
}
} else {
if (tuozhuaiY[0] == "-") {
onlybtn();
} else {
onlytop();
}
}
document.onmousemove = null;
document.onmouseup = null;
};
};
var moustime = 0;
document.getElementById("ziti").addEventListener("mouseenter", moveon);

function moveon() {
moustime++;
setTimeout(function () {
if (moustime == 1) {
document.getElementById("world").innerHTML =
"曾经沧海难为水,除却巫山不是云";
moveon();
} else if (moustime == 2) {
document.getElementById(
"world"
).innerHTML = `<span class="iconfont icon-bqxin">人生自是有情痴,此恨不关风与月。<span class="iconfont icon-bqxin">`;
moveon();
} else if (moustime == 5) {
document.getElementById(
"world"
).innerHTML = `<span class="iconfont icon-bqxin">身无彩凤双飞翼,心有灵犀一点通<span class="iconfont icon-bqxin">`;
} else {
moveon();
}
}, 2000);
}
document.getElementById("ziti").addEventListener("mouseleave", function () {
moustime = 0;
document.getElementById(
"world"
).innerHTML = `<span class="iconfont icon-bqxin">人生若只如初见,何事秋风悲画扇<span class="iconfont icon-bqxin">`;
});</script>
<script>var myaudio = document.querySelector(".myaudio");
var btnimg = document.querySelector(".btnimg");
var inpbtn = document.querySelector(".inpbtn");
var input = document.querySelector("input");
var isgo = 0;

function biggen() {
if (isgo == 0) {
myaudio.play();
btnimg.src = "./image/666.gif";
isgo = 1;
} else {
myaudio.pause();
btnimg.src = "./image/mypic.gif";
isgo = 0;
}
}

function inpbtnc() {
var name = input.value;
if (name == "") {
alert("请输入名称");
return;
}
var musicname = `./music/${name}.mp3`;
try {
myaudio.src = musicname;
} catch (err) {
console.log(111);
alert("请输入的名称不存在!");
}
}</script>
</html>

🏠CSS样式代码

* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}

canvas {
display: block;
position: absolute;
z-index: -2;
}

.snowback {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
z-index: 1;
}

.ziti {
height: 50px;
width: 100%;
font-size: 60px;
text-align: center;
position: absolute;
margin-top: 100px;
z-index: 11;
}

.ziti span {
height: 30px;
width: 100%;
font-size: 25px;
font-family: "微软雅黑";
text-align: center;
line-height: 30px;
/*关键代码*/
background-image: -webkit-linear-gradient(left, rgb(20, 26, 150), #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
animation: masked-animation 4s infinite linear;
}

/*关键代码*/

@keyframes {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}

.main {
width: 200px;
height: 200px;
top: calc(calc(50% - 100px));
margin-left: calc(50% - 100px);
position: absolute;
}

.box {
width: 200px;
height: 200px;
opacity: 1;
position: absolute;
transform: scale(0.8);
}

.box-biger:hover+.box {
transform: scale(0.8);
}

.box-biger {
width: 200px;
height: 200px;
opacity: 0;
transition: all 1s;
position: absolute;
z-index: 10;
}

.box-biger:hover {
width: 600px;
height: 600px;
opacity: 1;
margin-top: calc(50% - 300px);
margin-left: calc(50% - 300px);
}

.box ul {
width: 100%;
height: 100%;
transform-style: preserve-3d;
background-color: transparent;
list-style: none;
position: absolute;
transition: all 1s;
transform-origin: 50% 50% 0;
}

.box-biger ul {
width: 100%;
height: 100%;
transform-style: preserve-3d;
background-color: transparent;
list-style: none;
position: absolute;
transition: all 1s;
}

.small {
font-size: 60px;
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
}

.biger {
font-size: 60px;
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
}

.small img {
height: 100%;
width: 100%;
opacity: 1;
}

.biger img {
height: 70%;
width: 70%;
margin-top: 15%;
margin-left: 15%;
opacity: 0.3;
}

.idv1 {
background-size: cover;
left: 0;
top: 100%;
transform: translateZ(-100px) rotateY(180deg) rotate(180deg);
transform-origin: top;
}

.idv2 {
background-size: cover;
top: 0;
margin-left: 50%;
transform: rotateY(90deg);
}

.idv3 {
background-size: cover;
left: 0;
top: 0;
margin-left: -50%;
transform: rotateY(90deg);
}

.idv4 {
transform: rotateX(90deg);
top: -50%;
}

.idv5 {
transform: rotateX(270deg);
top: 50%;
}

.idv6 {
background-size: cover;
left: 0;
top: 0;
transform: translateZ(100px);
}

.idv7 {
background-size: cover;
left: 0;
top: 100%;
transform: translateZ(-100px) rotateY(180deg) rotate(180deg);
transform-origin: top;
transition: all 1s;
}

.idv12 {
background-size: cover;
left: 0;
top: 0;
transform: translateZ(100px);
transition: all 1s;
}

.box-biger:hover>ul>.idv7 {
transform: translateZ(-300px) rotateY(180deg) rotate(180deg);
}

.box-biger:hover>ul>.idv12 {
transform: translateZ(300px);
}

.btn {
height: 60px;
text-align: center;
line-height: 60px;
width: 90px;
margin-left: 20px;
float: left;
box-sizing: border-box;
position: absolute;
border-radius: 30px;
z-index: 30;
}

.btn img {
height: 100%;
width: 100%;
}

.btn:hover {
cursor: pointer;
}

.inpbtn {
height: 40px;
float: right;
line-height: 40px;
margin-left: 200px;
background-color: pink;
color: white;
border-radius: 30px;
}

input {
height: 40px;
width: 180px;
float: left;
border-radius: 20px;
font-size: 15px;
}

audio {
height: 40px;
width: 350px;
margin-left: -40px;
margin-top: -1px;
}

.audiobox {
height: 40px;
width: 300px;
border-radius: 20px;
overflow: hidden;
}

.btnonlond:hover>.hiddenbox {
visibility: inherit;
}

.hiddenbox {
margin-top: -60px;
margin-left: 100px;
height: 80px;
width: 300px;
transition: all 2s;
visibility: hidden;
position: absolute;
z-index: 30;
}

五、🎁更多源码

1.如果我的博客对你有帮助 ​​请 “👍点赞” “✍️评论” “💙收藏” ​​一键三连哦!

举报

相关推荐

0 条评论