当前位置:首页 > IT技术 > 编程语言 > 正文

?520七夕情人节告白网页代码?—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
2021-10-20 10:27:49

❀ 520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript

520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动态相册表白网页吧!

七夕节是一个十分浪漫的节日,相传牛郎织女每年农历七月七日会在鹊桥上相会,所以七夕是中国自古流传至今的情人节,在这一天如果你有喜欢的对象,不妨鼓起勇气表白哟。




1. PC(电脑端)演示

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html

2. H5(手机端)演示

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html5_02

❀ 代码目录


❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html5_03

❀二、3D相册(代码实现)


1.html 背景部分


<!-- 音乐 -->
<audio controls autoplay>
<source src="renxi.mp3">
</audio>
<!-- 背景 -->
<div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
</div>
<!-- 相册 -->
<div id="jsi-cherry-container" class="container">
<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>
</div>


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 {
width: 200px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
position: absolute;
left: 42%;
top: 45%;
transform: translate(-50%,-50%);
-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);
}


3.js 樱花飘落


<script>
var RENDERER = {
INIT_CHERRY_BLOSSOM_COUNT: 30,
MAX_ADDING_INTERVAL: 10,

init: function() {
this.setParameters();
this.reconstructMethods();
this.createCherries();
this.render();
setParameters: function() {
this.$container = $('#jsi-cherry-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />')
.attr({ width: this.width, height: this.height })
.appendTo(this.$container)
.get(0)
.getContext('2d');
this.cherries = [];
this.maxAddingInterval = Math.round(
(this.MAX_ADDING_INTERVAL * 1000) / this.width
);
this.addingInterval = this.maxAddingInterval;
},
reconstructMethods: function() {
this.render = this.render.bind(this);
},
var CHERRY_BLOSSOM = function(renderer, isRandom) {
this.renderer = renderer;
this.init(isRandom);
};
CHERRY_BLOSSOM.prototype = {
FOCUS_POSITION: 300,
FAR_LIMIT: 600,
MAX_RIPPLE_COUNT: 100,
RIPPLE_RADIUS: 100,
SURFACE_RATE: 0.5,
SINK_OFFSET: 20,
init: function(isRandom) {
this.x = this.getRandomValue(
-this.renderer.width,
this.renderer.width
);
var axis = this.getAxis(),
theta =
this.theta +
(Math.ceil(
-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
) *
Math.PI) /
500;
theta %= Math.PI * 2;

this.offsetY =
40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
this.thresholdY =
this.renderer.height / 2 +
this.renderer.height * this.SURFACE_RATE * axis.rate;
this.entityColor.addColorStop(
0,
'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
);
this.entityColor.addColorStop(
0.05,
'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
);
this.entityColor.addColorStop(
1,
'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
);
$(function() {
RENDERER.init();
});
</script>

❀三、樱花雨3D相册裁剪(教程)


教程如下:需要12张图片, 1-6 图片是大图 400px400px ,01-06 图片是小图 100px100px

将准备好的图片,自行替换 img 文件中的图片即可!

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_css_04

1.相片裁剪(教程)

1.1首先:下载美图秀秀/百度下载/或者软件安装

1.2或者使用在线链接裁剪—> ​​在线裁剪图片链接​

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html5_05

2.美图秀秀(电脑版)裁剪图片

2.1选择图片裁剪

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html_06

❀四、歌曲mp3更换教程(教程)


如需更换mp3背景音乐,可自行下载更换即可~ ​​mp3免费下载地址​​ 1.1搜索需要的歌曲

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html_07

1.2下载

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_javascript_08

1.3获取歌曲id

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_css_09

1.4关注公众号以后/复制链接到浏览器打开


❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html5_10

1.5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_css_11



❀六、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html_12




❀七、 源码获取

❀ ~ 关注我,点赞博文~ 每天带你涨知识!

❀ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

❀ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

❀ 3.以上内容技术相关问题可以相互学习,可关注↓公众号 获取更多源码 !

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript_html5_13



❀ 八、更多表白源码

1.❤100款 html+css+JavaScript 表白源码演示地址

2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)

3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)

4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)

5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)

6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐

7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)

8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)

10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)

11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)

12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)

13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)

14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节

15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备

16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备

17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)

18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备

19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)

20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)

21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表

22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)

23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)

24. html+css+js制作520表白网页,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效。

25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)

26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐

27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备

28. 520七夕情人节代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」

29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)

31.一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

32.HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)

33.送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤

35.《520七夕情人节表白礼物》:虚幻浪漫的爱情故事——❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)

36.HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)

37.《520七夕情人节表白》:制作属于我们的爱情相册网页(HTML+CSS+JavaScript)

38.师妹直呼“这也太哇塞了吧“ ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)

39.❤七夕情人节将至,用HTML+CSS给女朋友绘制一张彩色代码相册吧!




本文摘自 :https://blog.51cto.com/u

开通会员,享受整站包年服务立即开通 >