當(dāng)前位置:首頁 > IT技術(shù) > 編程語言 > 正文

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript
2021-10-20 10:27:49

? 520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript

520七夕節(jié)告白,也就是中國的情人節(jié),你除了送花你還會什么?? 快來制作高端大氣上檔次的D立體動態(tài)相冊表白網(wǎng)頁吧!

七夕節(jié)是一個十分浪漫的節(jié)日,相傳牛郎織女每年農(nóng)歷七月七日會在鵲橋上相會,所以七夕是中國自古流傳至今的情人節(jié),在這一天如果你有喜歡的對象,不妨鼓起勇氣表白喲。




1. PC(電腦端)演示

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html

2. H5(手機(jī)端)演示

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html5_02

? 代碼目錄


?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html5_03

?二、3D相冊(代碼實現(xiàn))


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

將準(zhǔn)備好的圖片,自行替換 img 文件中的圖片即可!

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_css_04

1.相片裁剪(教程)

1.1首先:下載美圖秀秀/百度下載/或者軟件安裝

1.2或者使用在線鏈接裁剪—> ??在線裁剪圖片鏈接??

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html5_05

2.美圖秀秀(電腦版)裁剪圖片

2.1選擇圖片裁剪

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html_06

?四、歌曲mp3更換教程(教程)


如需更換mp3背景音樂,可自行下載更換即可~ ??mp3免費(fèi)下載地址?? 1.1搜索需要的歌曲

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html_07

1.2下載

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_javascript_08

1.3獲取歌曲id

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_css_09

1.4關(guān)注公眾號以后/復(fù)制鏈接到瀏覽器打開


?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html5_10

1.5下載mp3 ~下載完畢以后自行替換mp3文件即可(如不想修改代碼,必須保持名稱一致)

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_css_11



?六、前端 零基礎(chǔ) 入門到高級 (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)

??web前端 零基礎(chǔ)-入門到高級 (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)??適合入門到高級的童鞋們?nèi)胧謣??送1000套HTML+CSS+JavaScript模板網(wǎng)站???520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html_12




?七、 源碼獲取

? ~ 關(guān)注我,點(diǎn)贊博文~ 每天帶你漲知識!

? 1.看到這里了就 [點(diǎn)贊+好評+收藏] 三連 支持下吧,你的「點(diǎn)贊,好評,收藏」是我創(chuàng)作的動力。

? 2.關(guān)注我~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者,一起探討 前端 Node 知識,互相學(xué)習(xí)」!

? 3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí),可關(guān)注↓公眾號 獲取更多源碼 !

?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢幻3D相冊(櫻花主題)HTML+CSS+JavaScript_html5_13



? 八、更多表白源碼

1.?100款 html+css+JavaScript 表白源碼演示地址

2.?520情人節(jié)送女朋友的生日禮物~html+css+js實現(xiàn)抖音炫酷櫻花3D相冊(含音樂)

3. 一行代碼教你撩妹手到擒來~html+css+js煙花告白3D相冊(含音樂+可自定義文字)

4. ?520給她準(zhǔn)備的情人節(jié)禮物~html+css+javascript漫天飛雪3D相冊(含音樂)

5. ?520情人節(jié)陪她一起看流星雨~html+css+javascript制作流星雨3D相冊(含音樂)

6. html+css+js生日快樂網(wǎng)站模板 (520/七夕情人節(jié)/告白/求婚/生日快樂) 含背景音樂

7. html+css+js生日快樂~程序員專屬的生日快樂html模板(含生日背景音樂)

8. ?女朋友生日? HTML+css3+js 實現(xiàn)抖音炫酷櫻花3D相冊 (含背景音樂)程序員表白必備

9. 我是如何用一行代碼表白學(xué)妹?520情人節(jié)送女朋友的3D櫻花雨相冊禮物?(程序員表白專屬)

10. 七夕情人節(jié)~html+css+javascript實現(xiàn)滿屏愛心特效(程序員表白)

11. 七夕情人節(jié)送花告白動畫(HTML+CSS+JavaScript)

12. html+css+js制作結(jié)婚倒計時網(wǎng)頁模板(520/七夕情人節(jié)/程序員告白)

13. html+css+javascript制作愛心表白代碼(520/七夕情人節(jié)/告白/生日禮物)

14. 超炫html+css+javascript幻化3D相冊 (含背景音樂)程序員表白必備 _520_七夕情人節(jié)

15. html+css+javascript實現(xiàn)100款超炫酷告白源碼(520/七夕/告白/求婚/脫單)程序員必備

16. html+css+javascript實現(xiàn)520告白愛情樹(含音樂)程序員表白必備

17. html+css+javaScript實現(xiàn)炫酷煙花表白(云霧狀粒子文字3D開場)

18. 程序員520告白Html+Js+Css花瓣相冊網(wǎng)頁模板?程序員表白必備

19. html+css+javascript實現(xiàn)乾坤八卦風(fēng)水羅盤時鐘 (免費(fèi)附源碼)

20. html+css+javascript實現(xiàn)抖音超火羅盤時鐘 (免費(fèi)附源碼)

21. 抖音超火JavaScript實現(xiàn)網(wǎng)紅太空人表盤 ~看程序員是如何用代碼做華為太空手表

22. html+css+js繪制冬季下雪3D相冊(520情人節(jié)/七夕情人節(jié)/程序員表白html代碼)

23. 制作一個浪漫溫馨的生日禮物送她~html+css+javascript藍(lán)色夢幻海洋3D相冊(含音樂)

24. html+css+js制作520表白網(wǎng)頁,全屏的愛心和表白語網(wǎng)頁動畫代碼,浪漫的520愛心表白動畫特效。

25. 520情人節(jié)程序員的浪漫告白~html+css+js浪漫星空?愛心3D相冊 (含音樂)

26. Html5浪漫結(jié)婚請柬婚禮網(wǎng)站模板?_愛她就給她最美的H5婚禮請柬_(婚慶電子邀請函)含背景音樂

27. html+css+javascript滿屏雪花愛心520表白網(wǎng)站 (含音樂)520告白/七夕情人節(jié)/生日禮物/程序員表白必備

28. 520七夕情人節(jié)代碼給女朋友送了一個禮物~html+css+javascript實現(xiàn)櫻花愛心相冊「可以拿去送給自己喜歡的人」

29. 七夕情人節(jié)教你如何告白~html+css+js制作唯美滿天星3D相冊(含音樂)程序員520表白必備

30. html+css+javascript生日快樂煙花 ?520/表白/七夕情人節(jié)/求婚?專用(自定義文字)

31.一行代碼教你七夕情人節(jié)如何告白—動漫3D相冊(音樂+文字)HTML+CSS+JavaScript

32.HTML+CSS+JavaScript制作七夕表白網(wǎng)頁(含音樂+自定義文字)

33.送學(xué)妹的生日禮物~ 制作一個超浪漫的告白3D相冊(HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript?制作浪漫氣球520告白相冊?

35.《520七夕情人節(jié)表白禮物》:虛幻浪漫的愛情故事——?520表白星空漫漫3D相冊?(HTML+CSS+JavaScript)

36.HTML5七夕情人節(jié)表白送花網(wǎng)頁制作(HTML+CSS+JavaScript)

37.《520七夕情人節(jié)表白》:制作屬于我們的愛情相冊網(wǎng)頁(HTML+CSS+JavaScript)

38.師妹直呼“這也太哇塞了吧“ ?520七夕情人節(jié)表白網(wǎng)頁制作?(HTML+CSS+JavaScript)

39.?七夕情人節(jié)將至,用HTML+CSS給女朋友繪制一張彩色代碼相冊吧!




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

開通會員,享受整站包年服務(wù)立即開通 >