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

一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录

❉ 520情人节陪她一起看流星雨~html+css+javascript流星雨3D相册(含音乐)
❉ 前言
❉ 流星雨3D相册演示(含背景音乐)
- 1. PC(电脑端)演示
- - 效果二
  - 效果三
- 2. H5(手机端)演示
❉ 代码文件目录
一、3D相册(代码实现)
- html (3D相册部分)
- js (流星雨部分)
- css (3D相册部分)
二、3D相册替换(教程)
三、歌曲mp3更换教程(教程)
四、做好的网页效果,如何通过发链接给别人看?
- 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
- - 1.1部署流程
  - 1.2 哇~ 部署成功
五、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
六、❉ 源码获取
七、❉更多表白源码

❉ 前言

❤七夕情人节表白,520/七夕情人节/求婚/ 3D相册程序员也可以很浪漫哦❤

❤520创意表白网站，让女友对你死心塌地。女神轻松领回家❤

html+css+javascript 实现3d旋转相册-包含音乐,(生日送女友,表白,撩妹)，动态生成效果, 抖音很火的旋转相册,这样制作的~,现在,来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❉ 流星雨3D相册演示(含背景音乐)

流星雨3D相册-在线演示地址

1. PC(电脑端)演示

效果二

效果三

2. H5(手机端)演示

❉ 代码文件目录

一、3D相册(代码实现)

html (3D相册部分)

<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>
</body>

js (流星雨部分)

 <script>
setTimeout(init,100);
function init(){var obox = document.getElementById('box'),aDiv = obox.getElementsByTagName('div');for (var i = 0; i < aDiv.length; i++) {aDiv[i].style.background = "url(img/"+(i+1)+".jpg) center/cover";aDiv[i].style.transform = "rotateY("+(i*36)+"deg) translate3d(0,0,350px)";aDiv[i].style.transition = "transform 1s "+(aDiv.length-i)*0.2+"s";}var sX,sY,nX,nY,desX = 0,desY = 0,tX = 0,tY = 10,index = 0;//滚轮初始值document.onmousedown = function(e){clearInterval(obox.timer);e = e || window.event;var sX = e.clientX,sY = e.clientY;this.onmousemove = function(e){e = e || window.event;var nX = e.clientX,nY = e.clientY;// 当前点的坐标和前一点的坐标差值desX = nX - sX;desY = nY - sY;tX += desX*0.1; tY += desY*0.1;obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)";sX = nX;sY = nY;}this.onmouseup = function(){this.onmousemove = this.onmouseup = null;obox.timer = setInterval(function(){desX *= 0.95;desY *= 0.95;tX += desX*0.1;tY += desY*0.1;obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)";if (Math.abs(desX)<0.5 && Math.abs(desY)<0.5) {clearInterval(obox.timer);}},13);}return false;}//滚轮放大缩小mousewheel(document,function(e){e = e || window.event;var d = e.wheelDelta/120 || -e.detail/3;if (d>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>

css (3D相册部分)

     *{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;}

二、3D相册替换(教程)

教程如下：首先需要准备10张图片不需要裁剪都可以哦, 图片格式是.jpg 不要错了

三、歌曲mp3更换教程(教程)

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

2.下载

3获取歌曲id

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

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

四、做好的网页效果,如何通过发链接给别人看?

1.1 解决部署上线~> 部署上线工具(可永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

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

适合入门到高级的童鞋们入手~

六、❉ 源码获取

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

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

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

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

七、❉更多表白源码

❤100款表白源码演示地址

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

一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
HTML5七夕520情人节表白网页❤ 属于我们的浪漫星空 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 属于我们的浪漫星空 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波 ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享 ...

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

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

❉ 文章目录

❉ 前言

❉ 流星雨3D相册演示(含背景音乐)

1. PC(电脑端)演示

效果二

效果三

2. H5(手机端)演示

❉ 代码文件目录

一、3D相册(代码实现)

html (3D相册部分)

js (流星雨部分)

css (3D相册部分)

二、3D相册替换(教程)

三、歌曲mp3更换教程(教程)

四、做好的网页效果,如何通过发链接给别人看?

1.1 解决部署上线~> 部署上线工具(可永久免费使用)

1.1部署流程

1.2 哇~ 部署成功

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

六、❉ 源码获取

七、❉更多表白源码

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

最新文章

热门文章

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

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

❉ 文章目录

❉ 前言

❉ 流星雨3D相册演示(含背景音乐)

1. PC(电脑端)演示

效果二

效果三

2. H5(手机端)演示

❉ 代码文件目录

一、3D相册(代码实现)

html (3D相册部分)

js (流星雨部分)

css (3D相册部分)

二、3D相册替换(教程)

三、歌曲mp3更换教程(教程)

四、做好的网页效果,如何通过发链接给别人看?

1.1 解决部署上线~> 部署上线工具(可永久免费使用)

1.1部署流程

1.2 哇~ 部署成功

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

六、❉ 源码获取

七、❉更多表白源码

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

最新文章

热门文章

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