花火の背景を持つ3Dタイピングキューブアルバム（ダウンロードリンクが添付されています）

1.はじめに
2.基本的なコードブロック（HTML）、（あまりにも多くのcssとjsは省略されています）
3。基本的に希望する結果に変更されます
4.要約とダウンロードアドレス

1.はじめに
このアルバムは、2021年以前にリリースされた花火とルービックキューブのアルバムとタイピングエフェクトを組み合わせたもので、 BGMが追加されています。上記は、実行中のプログラムのレンダリング、HTMLでの複数の部分の使用と設定です。、CSS、それは言葉の文字通りの意味です。単純なルービックキューブアルバムは、HTMLとCSSの2つの部分で直接完成させることができますが、タイピングの効果と花火の効果は、JSライブラリを導入することによって完成させる必要があります。もちろん、HTMLとcssは、フロントエンドをマスターする必要があることを学ぶための最も基本的なものです。これら2つのことを学んだ後、JSを学ぶための段階に入る必要があります。このJSについてあまり知る必要がない場合もあります。、しかし私たちの最も基本的なことはそれを行うことです、あなたのためにJSファイルはそれを呼び出します、もちろんそれを開くとき、あなたはドンのコードも見る必要があります;下の赤いボックスはHTMLを入力する効果を達成するために使用されますファイルと他の2つを使用します花火の開花と上昇の効果を実現するために、JSの高度な段階に達した場合、それらを分割して別々に学習できます。花火の効果とキューブアルバムを別々にしたい場合は、2倍にすることができます。 -リンクをクリックします：2021花火の背景;別のキューブアルバム
ここに画像の説明を挿入します
2、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>

3.変更方法（コードの変更を可能な限り最小限に抑える）
1。画像の変更：imgフォルダー内の画像を直接削除してから、必要な画像を配置し、画像名を次のように変更します。1.jpg... 12.jpg

2.プレゼンテーション名の変更：jsフォルダーを開いた後、script.jsを右クリックしてメモ帳で開き、「ファンビンビン」を目的のテキスト効果に直接変更します。後ろの「40」はのサイズを示します。テキスト

3.バックグラウンドミュージックの変更：ビデオフォルダ内の音楽を削除して目的の音楽に配置し、index.htmlを右クリックしてメモ帳で開き、ここのテキストを目的の音楽の名前に変更します。
ここに画像の説明を挿入します
4.まとめとそのダウンロードアドレス
1.花火のバックグラウンドタイピングアルバムは比較的興味深く、古典的です。それを改善する必要がある場合は、ソースコードをダウンロードして、自分で調べることができます。これらの機能と原則に基づいて設計できますが、時間がかかります。練習と蓄積。プログラミングのためにさらにコードを入力する必要があります。練習しないでください。
練習はテストするのに良い方法であり、学んだ知識は練習によってテストされた後、自分自身によってよりよく吸収されることができます。問題が発生した場合は、プライベートメッセージを送信したり、連絡先情報を追加して、誰かがオンラインで案内できるようにすることもできます。必要に応じて、
2を追加できます。アルバム（Google Chrome、Firefox、Star Wish）を開くことはお勧めしません。これらのブラウザは、バックグラウンドミュージックがロードされていない可能性があるため）、など、それはマイクロソフトエッジまたは360ブラウザで開くことをお勧めします）
3.以下はネットワークディスクのダウンロードアドレスである（それをダブルクリックします）へ
のダウンロードからネットワークディスク

ダイナミックな3Dフォトアルバムが必要な小さなパートナーの場合は、肉を少なくする必要があるかもしれません（3.66）

リンク：https
：//pan.baidu.com/s/1KAiZJfWMyGzX8mPKDBDEww抽出コード：wv5d

花火の背景を持つ3Dタイピングキューブアルバム（ダウンロードリンクが添付されています）

花火の背景を持つ3Dタイピングキューブアルバム（ダウンロードリンクが添付されています）

おすすめ