10

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

 3 years ago
source link: https://blog.csdn.net/m0_46179473/article/details/114988758
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

烟花背景的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浏览器打开)
3、以下是网盘提取下载地址（双击即可）
网盘下载
链接：https://pan.baidu.com/s/1KAiZJfWMyGzX8mPKDBDEww
提取码：wv5d


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK