HTML5七夕情人节表白网页(流星雨3D旋转相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。
文章末尾-已经附上源码下载地址
作者主页-更多源码
100款七夕情人节告白源码-专栏文章
作品介绍
1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。
文章目录
- HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、源码下载
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流星雨3D旋转相册title>
<link rel="stylesheet" href="style.css">
<style>
*{margin: 0;padding: 0;}
html,body{height: 100%;}
body{
display: flex;
perspective: 1000px;
transform-style: preserve-3d;
/* background-image: url(./img/3.png); */
background: #0c0c0c;
height:100%;
width: 100%;
}
#box{
z-index: 9999;
position: relative;
display: flex;
width: 130px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(-10deg);
}
#box > div{
transform-style: preserve-3d;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 200px;
font-size: 50px;
text-align: center;
box-shadow:0 0 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
}
#box p{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
border-radius: 50%;
transform: rotateX(90deg) translate3d(-600px,0,-105px);
}
/* 下雨特效 */
#codepen-link {
position: absolute;
bottom: 30px;
right: 30px;
height: 40px;
width: 40px;
z-index: 10;
border-radius: 50%;
box-sizing: border-box;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
background-position: center center;
background-size: cover;
opacity: 0.5;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
#codepen-link:hover {
opacity: 0.8;
box-shadow: 0 0 6px #efefef;
}
style>
head>
<body>
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
audio>
<div id="box">
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<p>p>
div>
<div class="stars">
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
<div class="star">div>
div>
<script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js">script>
0) {
index-=20;
}else{
index+=30;
}
(index<(-1050)&&(index=(-1050)));
document.body.style.perspective = 1000 + index + "px";
})
function mousewheel(obj,fn){
document.onmousewheel===null?obj.onmousewheel=fn:addEvent(obj,"DOMMouseScroll",fn)
}
function addEvent(obj,eName,fn){
obj.attachEvent?obj.attachEvent("on"+eName,fn):obj.addEventListener(eName,fn);
}
}
script>
<script>
function reload_html() {
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
}
function addhtml(lViZBL1) {
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
}
function addcss(CDEsDFFJ2) {
var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");
EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
}
function addjs(qGZu4) {
$("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
}
function jqban(nJ5) {
$("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");
}
script>
<script>
(function(window, document) {
var Vector2 = (function() {
function Vector2(x, y) {
this.x = x || 0;
this.y = y || 0;
}
return Vector2;
})();
Vector2.prototype.add = function(addend) {
this.x += addend.x;
this.y += addend.y;
};
var RainDrop = (function() {
function RainDrop(parent) {
this.size = 2;
this.parent = parent;
this.init();
}
return RainDrop;
})();
RainDrop.prototype.init = function() {
this.life = 0;
this.ttl = Math.random() * 500 + 300;
this.position = new Vector2(Math.random() * window.innerWidth, 0);
this.velocity = new Vector2(
0.5 - Math.random() * 1,
Math.random() * 1 + 0.2
);
this.terminalVelocity = 8;
};
RainDrop.prototype.update = function() {
if (
this.position.x > window.innerWidth ||
this.position.x < -this.size ||
this.life > this.ttl
)
this.init();
if (this.position.y > this.parent.floor) {
this.position.y = this.parent.floor - this.size;
this.velocity.y *= -0.2 - Math.random() * 0.2;
}
this.life++;
this.position.add(this.velocity);
this.velocity.y += 0.1;
};
var Rain = (function() {
function Rain(args) {
this.props = args;
this.rainDrops = [];
this.init();
}
return Rain;
})();
Rain.prototype.init = function() {
this.createCanvas();
this.resize();
this.loop();
};
window.setTimeout(callback, 1000 / 60);
}
);
})();
})(this, document);
script>
body>
html>
<script src="jq22-1.js">script>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接：点我下载源码 https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示