烟花背景的3D打字魔方相册（末尾附加下载地址）

一、简介
二、代码基本块(HTML),(css、js太多了就省略了)
三、基本修改成自己想要的结果
四、总结及其下载地址

一、简介
该想相册是结合了之前发的2021的烟花和魔方相册和打字效果在加上背景音乐来完成的；以上是该程序运行的效果图，HTML，CSS中多部分的运用与设置，就是单词的字面意思，单纯的一个魔方相册是直接就可以用HTML、css两个部分就可以完成的，但是打字的效果和烟花的效果呢是需要引入JS库来完成的；当然了我们的HTML和css是学习前端最基本的需要掌握的，我们学完这两个东西我们需要进入的阶段就是学习JS，这个JS我们有时候不必太多深入的了解，但是我们最基本就是做到，给你一个JS文件会去调用它，当然了当你打开它的时候也要看到董这个代码即可；以下红色框里的就是用来实现在HTML文件中打字的效果，其余的两个就是用来实现烟花绽放和上升的效果，如果到了JS进阶阶段呢可以把他们拆分来单独研究的，想需要单独的烟花效果和魔方相册可以双击链接即可：2021的烟花背景；单独的魔方相册

二、HTML代码
index.html:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>css-3d旋转</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/index.css" /><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/default.css"></head><body><audio autoplay="" loop=""><source src="video/白月光与朱砂痣.mp3"></audio><div class="htmleaf-container"><div class="htmleaf-content"><p class="word1"></p><p class="word2"></p></div></div><!--/*外层最大容器*/--><div class="wrap"><!--    /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="img/1.jpg" class="pic" /></div><!--后面图片 --><div class="out_back"><img src="img/2.jpg" class="pic" /></div><!--左图片 --><div class="out_left"><img src="img/3.jpg" class="pic" /></div><div class="out_right"><img src="img/4.jpg" class="pic" /></div><div class="out_top"><img src="img/5.jpg" class="pic" /></div><div class="out_bottom"><img src="img/6.jpg" class="pic" /></div><!--小正方体 --><span class="in_front"><img src="img/7.jpg" class="in_pic" /></span><span class="in_back"><img src="img/8.jpg" class="in_pic" /></span><span class="in_left"><img src="img/9.jpg" class="in_pic" /></span><span class="in_right"><img src="img/10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/12.jpg" class="in_pic" /></span></div></div><script src="js/jquery-1.11.0.min.js" type="text/javascript"></script><script src="js/l-by-l.min.js"></script><script src='js/gameCanvas-4.0.js'></script><script src="js/script.js"></script><script src="js/jquery-3.6.0.min.js"></script><script>jQuery(document).ready(function($){$(".word1").lbyl({content: "无论生死，无论别离欢聚，我要告诉你，我会一向牵着你，一向到老。将最简单的话语结合最深刻的戒指送上，就是一封最感人的情书，当然，戒指要选取乐维斯实名定制的戒指，寓意以我之名，冠你指间，一生相伴，一世相随。深刻的寓意就是一封最好的情书。遇见你是我最美好的时光，你让我感受到了人生的真谛，人有人之间的温暖。你就像春天里的暖风，拂过我冰封已久的湖面，让他荡起一阵阵的涟漪，让他为你的真诚与美丽所动。我不奢求什么，只求你能出现在我的生命里，让我的心为你而绽放。",speed: 80,type: 'show',finished: function(){ $('.word2').lbyl({content:"我喜欢你，我知道这个决定对你来说一定很惊讶而且恐慌。我已经承受不住对你的感情了，我想了很久。上课的时候，我坐立不安，心里充满了拥有你的渴望。睡觉的时候，翻来覆去的想你。吃饭的时候在想些我们在一起的生活。我的大脑和心跳完全出于被动状态，盯着你，使我感到窒息。做梦的时候满是你那充满气质而诱人的脸颊。喜欢看你发呆，喜欢看你微笑，喜欢看你认真。",speed: 80,type: 'fade',fadeSpeed: 500})} // Finished Callback});});</script></body>
</html>

三、修改方法（尽量的减少修改代码了）
1、图片的修改：直接把img文件夹中的图片删除，然后放入自己想要的图片并且修改图片名字为：1.jpg…12.jpg

2、呈现名字的修改：打开js的文件夹后右键script.js用记事本打开，直接将“范冰冰”改成自己想要的文字效果即可，后面的“40”指的是文字的大小

3、背景音乐的修改：video文件夹中将音乐删除后放入自己想要的音乐，之后右键index.html用记事本打开，将这里的文字改为自己要的音乐名字即可

四、总结及其下载地址
1、该烟花背景打字相册还是相对来说比较有趣与经典的，如果需要改进的地方呢可以自行下载源代码下去研究一下，可以在这些功能及其原理上进行设计，不过也是需要长期的实践与积累。编程嘛还是需要多敲代码嘛，只看不实践那…。
实践是检验的好办法，学到的知识经过实践来检验，才能更好的被自身吸收。如果大家遇到什么问题的话也可以私信，或者加联系方式可以有人在线指导大家的，如有需要可以添加
2、该相册不建议用（Google Chrome，Firefox，星愿）等打开，因为这些浏览器可能会加载不出背景音乐这个问题，建议用Microsoft Edge打开或者360浏览器打开)
以下是提取或下载该文件的地址：
链接网盘下载：https://pan.baidu.com/s/1fbooDPoM37mBDWjVVnivug
提取码：n8y0
复制这段内容后打开百度网盘手机App，操作更方便哦
如果博主及时没有给大家回复可以添加该QQ群：336901676

烟花背景的3D打字魔方相册（末尾附加下载地址）相关推荐

抖音上很火的动态相册（末尾附加下载地址）
抖音上很火的动态相册(末尾附加下载地址) 一.相册简介二.部分代码简介及其运用三.修改指南四.总结及其获取方式一.相册简介 1.首先该相册是用大家熟悉的HTML.CSS在此基础之上调用了几个J ...
java 编程动感相册_抖音3D立体动态相册实现代码下载
今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧,别忘了发到自己抖音,让女朋友看一下!先上效果图,来引起下你们的兴趣. 再看看具体的效果: 一.新建一个i ...
微信高保真原型设计+末尾附加下载链接（Axure9-rp）
Axure9高保真原型设计一.微信主界面聊天界面-可以发送信息-时间与电脑时间同步二.通讯录界面三.发现界面朋友圈四.我的修改个人信息有需要的朋友可以自行点击下方下载链接.资源包有微 ...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个文章目录一.源码地址二.实现效果 1. 电脑端 2. 手机端三.源 ...
3d相册 html 代码_HTML5 3D立体图片相册
插件简介 HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标拖拽从多个角度浏览相册图片,点击图 ...
android 3d魔方代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了一.我们先准备好们的html代码 3d立体魔方好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
送给女朋友的3D立体动态相册的实现代码
送给读者的话: 目前在抖音上很火的送给女朋友的3D立体动态相册,现在把代码分享给大家,有兴趣的朋友建议自己重头敲打一遍,这样才会理解的更加透彻.哈哈,先上效果图,吸引起你们的兴趣! 接下来就进入正题了 ...
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗？（纪念日的小浪漫）
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
RubikFX:用JavaFX 3D解决魔方难题
RubikFX:用JavaFX 3D解决魔方难题翻译:周克非来源:JPereda's Coding Blog 原文地址: http://www.tuicool.com/articles/hit/ ...

烟花背景的3D打字魔方相册（末尾附加下载地址）

烟花背景的3D打字魔方相册（末尾附加下载地址）

烟花背景的3D打字魔方相册（末尾附加下载地址）相关推荐

最新文章

热门文章