送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)520情人节/七夕情人节/程序员表白...
❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白
,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
❉ 文章目录
- ❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
- ❉ 效果演示
- ❉ 1.动态效果
- ❉ 2.静态效果
- ❉ 代码文件目录
- 一、文字修改(代码实现)
- HTML (文字部分)
- JS (雪花部分)
- CSS(相册部分)
- 二、歌曲mp3更换教程(教程)
- 三、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
- 四、❉ 源码获取
- 五、❉更多表白源码
- 六、❉150套Echarts大数据可视化
- 七、❉更多作品文章
❉ 效果演示
❤100款 html+css+JavaScript 表白源码演示地址
❉ 1.动态效果
❉ 2.静态效果
示例:鼠标移出3D相册自动旋转不展开
示例:鼠标移入旋转3D相册展开 伴随雪花~效果非常漂亮
❉ 代码文件目录
一、文字修改(代码实现)
示例:找到index.html文件,只需要修改文字就行
示例:图片大小: 大图400px400px 小图是 100px100px 3D图片修改教程
HTML (文字部分)
<div class="cs"> <img src="http://web.tanganbin.cn/biaobai_shengdan/picture/tx.jpg" id="logo"> <br><br><br> <h1 style=" color:#3FF">❤2021.5.20与你相爱 1314天~</h1> <h2 style=" color:#3FF">祝你享尽七夕情人节的快乐和喜悦。</h2> <!-- 相册 S --> <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> <div id="MagicFace" style="position: absolute; z-index: 999;"> <script src="js/christmas.js"></script> </div>
JS (雪花部分)
<script type="text/javascript"> var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container; var particle; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var particles = []; var particleImage = new Image(); //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" ); particleImage.src = 'images/ParticleSmoke.png'; function init() { container = document.createElement('div'); document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.z = 1000;
scene = new THREE.Scene(); scene.add(camera); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); var material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) }); for (var i = 0; i < 500; i++) { particle = new Particle3D(material); particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; particle.scale.x = particle.scale.y = 1; scene.add(particle);
particles.push(particle); } container.appendChild(renderer.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); setInterval(loop, 1000 / 60); }
function loop() { for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.updatePhysics();
with(particle.position) { if (y < -1000) y += 2000; if (x > 1000) x -= 2000; else if (x < -1000) x += 2000; if (z > 1000) z -= 2000; else if (z < -1000) z += 2000; } } renderer.render(scene, camera); } </script>
CSS(相册部分)
.minbox li:nth-child(1) { background: url(https://z3.ax1x.com/2021/07/21/WackfH.png) no-repeat 0 0; -webkit-transform: translateZ(50px); }
.minbox li:nth-child(2) { background: url(https://z3.ax1x.com/2021/07/21/WacNn0.png) no-repeat 0 0; -webkit-transform: rotateX(180deg) translateZ(50px); }
.minbox li:nth-child(3) { background: url(https://z3.ax1x.com/2021/07/21/WacwAU.png) no-repeat 0 0; -webkit-transform: rotateX(-90deg) translateZ(50px); }
.minbox li:nth-child(4) { background: url(https://z3.ax1x.com/2021/07/21/Waca7T.png) no-repeat 0 0; -webkit-transform: rotateX(90deg) translateZ(50px); }
.minbox li:nth-child(5) { background: url(https://z3.ax1x.com/2021/07/21/WacYXq.png) no-repeat 0 0; -webkit-transform: rotateY(-90deg) translateZ(50px); }
.minbox li:nth-child(6) { background: url(https://z3.ax1x.com/2021/07/21/Wac1hQ.png) no-repeat 0 0; -webkit-transform: rotateY(90deg) translateZ(50px); }
.maxbox li:nth-child(1) { background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0; -webkit-transform: translateZ(50px); }
.maxbox li:nth-child(2) { background: url(https://z3.ax1x.com/2021/07/21/WagDVf.png) no-repeat 0 0; -webkit-transform: translateZ(50px); }
.maxbox li:nth-child(3) { background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0; -webkit-transform: rotateX(-90deg) translateZ(50px); }
.maxbox li:nth-child(4) { background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0; -webkit-transform: rotateX(90deg) translateZ(50px); }
.maxbox li:nth-child(5) { background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0; -webkit-transform: rotateY(-90deg) translateZ(50px); }
.maxbox li:nth-child(6) { background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0; -webkit-transform: rotateY(90deg) translateZ(50px); }
二、歌曲mp3更换教程(教程)
如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
1.1搜索需要的歌曲
1.2下载
1.3获取歌曲id
1.4关注公众号以后/复制链接到浏览器打开
1.5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
三、❉ 源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉ 3.以上内容技术相关问题可以相互学习,可关注↓公众号 获取更多源码 !
送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)520情人节/七夕情人节/程序员表白...相关推荐
- 情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
- HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤渐变色 满天星空3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
- 我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
- 我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)...
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
- 一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
最新文章
- IGMP V1 V2 V3 定义和区别
- Win7下Event_Log服务4201错误的有效解决方法
- mysql 连接器配置_配置连接器 - 金融分布式架构 SOFAStack - 阿里云
- 【数学和算法】初识卡尔曼滤波器(五)
- CF590E-Birthday【AC自动机,最大独立集】
- 走向REST:将Tomcat与Spring和JAX-RS嵌入(Apache CXF)
- 考研计算机网络,2020计算机专业考研的计算机网络部分知识点
- 转: 技巧/诀窍:在ASP.NET中重写URL
- Login控件在浏览器中打开时显示英文
- java匿名内部类 内部类_java中的匿名内部类详细总结
- Centos7系统安装riscv-spike
- 知识图谱关系抽取 python_知识图谱关系抽取
- WIN7操作系统IE11的离线安装(有时间总结下)
- 制作svg格式矢量图
- 【笔记】一些Attention 方面的网络
- hdu 4489 The King’s Ups and Downs【递推】
- 2019 虎鲸杯电子取证大赛赛后复盘总结
- Mysql时间函数用法
- 个人习惯养成的简单公式
- 新买笔记本误删office2021解决方法