HTML 顏色

TML 顏色由紅色、綠色、藍色混合而成。

顏色值

HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。

這個表格給出了由三種顏色混合而成的具體效果：

顏色值

顏色(Color)	顏色十六進制(Color HEX)	顏色RGB(Color RGB)
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

1600萬種不同顏色

三種顏色紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

在下面的顏色表中你會看到不同的結(jié)果，從0到255的紅色，同時設(shè)置綠色和藍色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。

Red Light	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

灰暗色調(diào)

以下展示了灰色到黑色的漸變

Gray Shades	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

Web安全色?

數(shù)年以前，當大多數(shù)計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數(shù)百萬種顏色，不過做選擇還是你自己。

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調(diào)色板時，所有的計算機能夠正確地顯示所有的顏色。

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

文共6143字，預(yù)計學(xué)習(xí)時長25分鐘或更長

對很多人來說，學(xué)寫代碼很難。本文將通過編寫與眾不同且富有詩意的代碼來克服學(xué)習(xí)代碼最初遇到的困難。如果你是個JavaScript新手，或者是在編程學(xué)習(xí)過程中遇到了困難，本文介紹的方法也許可以幫到你。

為什么學(xué)習(xí)編程這么難？

以下是人們對編程很難學(xué)及JavaScript（或任何編程語言）很枯燥的一些誤解：

· 代碼晦澀難懂令人望而生畏，只有實用功能毫無樂趣；

· 代碼僅適用于機器，人們無法與它交流或參與其中；

· 代碼不算一種語言，因為它與一般語言的用法截然不同，形式上的差別也很大；

· 提到程序員，人們就會想到邪惡的黑客或黑客帝國的成員等刻板形象，因此沒有認同感。

未接觸編程的人

開發(fā)人員需要以一種非常特殊的方式看待代碼，甚至要以一種完全不同且高度邏輯化的方式來思考。編程語言非常嚴格，對錯誤零容忍，單個字符就可能使機器無法理解人們的意思，并使應(yīng)用程序奔潰。學(xué)習(xí)編程時，應(yīng)將之前學(xué)習(xí)人類語言時的讀寫規(guī)則歸零（順便說一下，在學(xué)習(xí)一種新的人類語言時也是如此）。

但并非網(wǎng)上的編程語言、文檔或視頻教程都是針對“從人類語言到編程語言的轉(zhuǎn)換”這一思維而編寫的。當然，他們也沒有必要這樣做。畢竟，寫代碼的主要是為了告訴機器要做什么。

鑒于此目的，沒有機會對這兩種語言進行比較，因此人類的語言（包括詞匯和語法規(guī)則）似乎對學(xué)習(xí)編程語言毫無用處。JavaScript語言中沒有“愛”這個詞，“我愛你。”這句話在其中也沒有意義。機器（或瀏覽器）根本不理解愛。這種“聞所未聞”、“無從下手”的感覺可能會讓人感到害怕。

第一次接觸編程的人

這就是本文的意義所在，借助已掌握的人類語言知識，將JavaScript看作一種人類語言，以一種更容易、更具藝術(shù)性的方式來學(xué)習(xí)它。舉個小例子來說明吧！

一個有趣的事實是，一些編程語言實際上已經(jīng)從一種編程語言轉(zhuǎn)換到另一種編程語言。這就是為什么掌握多種編程語言變得簡單多了——只學(xué)一門編程語言就夠啦。

一個小例子

例如，在很多情況下，要想運行JavaScript代碼，需要準備好“文檔”（基本上是網(wǎng)站，用戶每次訪問時都在下載），以便與HTML元素進行交互。在純JavaScript語言中，可能會偶然發(fā)現(xiàn)以下內(nèi)容。

(function() {
 // Your code goes here
})();

或者有時像這樣：

if (document.readyState === ‘complete’) {
 // Your code goes here
}

上述第一個代碼肯定需要加以解釋，而對第二個代碼（也許需要一些想象），可以這樣理解：滿足了必需的某個條件后，后續(xù)步驟僅通過觀察就能進行下去。

試想這樣的場景：

onceUponATime(function () {
 // Your code (story) goes here
})

連小孩都能理解“Once upon a time” (“曾幾何時”)這樣的內(nèi)容。這種內(nèi)容在與開發(fā)者對話（通過喚起他們的童年回憶），同時在理論上也能做開發(fā)。這就是“讓人類語言轉(zhuǎn)換為編碼語言”的想法。

關(guān)于“functions（函數(shù)）”的簡要說明：函數(shù)基本來說是一種技能，在調(diào)用之前處于休眠狀態(tài)。“To read”是function read() { …}}的一項技能，想讀取某內(nèi)容時就寫成這樣：read()，就會調(diào)用才會調(diào)用該函數(shù)。還有一種是“匿名函數(shù)”，即function(){ … }（沒有名字，就像上面的代碼片段那樣），它基本上是“一次性的臨時操作”，甚至不算一種技能，例如“按下按鈕”。

扭轉(zhuǎn)乾坤：從信息到基礎(chǔ)

要更進一步了解這個想法，可將上述的原因和誤解顛倒過來：

一首小詩，

用JavaScript語言編寫。

為人類而寫，

講述兩個人之間的愛。

// Love at first sight
if (me.getDistanceTo(you.position) < 200) {
 me.setFeelings({
 inLove: true,
 });
}

它不具有功能性，目前也不適用于機器，只是方便人們閱讀和理解。

如果你能看懂這首詩，你實際上是理解了一段JavaScript代碼，也許你還會拿來與英語進行比較。

現(xiàn)在你可能會問自己：我理解這一點，但它為什么這么寫呢？這種語言背后的規(guī)則（語法）是什么呢？“me”在技術(shù)層面是什么意思？為什么這段代碼看起來很像英語？

規(guī)則、詞匯和變量

學(xué)習(xí)編程語言時，最重要的事情之一就是理解變量的概念。

每一種人類語言都有其規(guī)則（語法）和大量詞匯（意思均已知）。顯然，只有先學(xué)習(xí)這兩點才會說這種語言。

與許多其它編程語言一樣，JavaScript也有一套規(guī)則（例如，單詞之間要加“.”或如何編寫“if”語句）和詞匯（if、document、window、Event等）。這些關(guān)鍵字由JavaScript（和瀏覽器）所有（或“預(yù)先定義”），并且每個關(guān)鍵字都有其特定用途。

就像之前提到的那樣，似乎沒有機會去和英語中的單詞和句子做比較，因為JavaScript中根本沒有對應(yīng)的詞和句子。

這就是引入變量這個概念的原因，開發(fā)人員可以（甚至必須）定義變量，以便讓機器和開發(fā)人員理解某些東西代表什么。變量可以采用多種形式（因此得名）：它們可以是一串單詞和字母（字符串）、數(shù)字、操作（函數(shù)）、甚至集合（數(shù)組），不勝枚舉。

在所有人類語言中，可能都有一個關(guān)于“l(fā)ove”的詞，你大概明白它是什么意思，但不太肯定，因為它太主觀了。但無論怎樣，還是有一個詞可以形容它。

但在JavaScript中，如果不定義“l(fā)ove”，就沒有與之對應(yīng)的表達，至于形式，則完全取決于你。

var love = {
 color: ‘red’,
 duration: 365,
 loveTarget: ‘cats’,
};
// a simple variable expression,
// where love is an object “{ … }”, a thing
// with some properties (color, duration, loveTarget).
const love2 = {
 color: ‘purple’,
 duration: ‘forever’,
 loveTarget: ‘dogs’,
};
// also a variable expression, where love2 (aconstant),
// cannot be redefined / overwritten completely:
// love2 = undefined; // => will not work
// (“undefined” is a pre-defined javascriptkeyword,
// basically saying “has no value”)

區(qū)分JavaScript中預(yù)定義的內(nèi)容（JavaScript規(guī)則和詞匯表）與開發(fā)人員實際自定義的內(nèi)容（也稱為“應(yīng)用程序邏輯”或“業(yè)務(wù)邏輯”）十分重要。

回到上面寫的詩：

// Love at first sight
if (me.getDistanceTo(you.position) < 200) {
 me.setFeelings({
 inLove: true,
 });
}

這些表達式來自以下JavaScript詞匯表規(guī)則集：

if (…) { … }
// if statement: when … is met, do things in { … }
{
 inLove: true,
}
// an “object” with some info, some thing in the world.
// can contain other info, and “skills” (functions).
// “inLove” is a custom property,
// “true” is pre-defined in javascript, (meaning: “yes”)
// and the value of “inLove”.
.
// needed to access an objects property “my name: me.name”
getDistanceTo()
// an expression to “call” a function (a “skill”).
// getDistanceTo is custom (not JavaScript), and a function,
// so it can be executed / called upon with the “()” after.
// sometimes you can pass arguments in those brackets (like “position”)
// to change the outcome of a function.

這些是變量，可以自定義它們的名稱和行為。

me // an object, some thing in the world
you // an object, some thing in the world
position // an info about “you”, accessed by the “.”
getDistanceTo // a skill of me, accessed by the “.”
getDistanceTo() // the skill, with javascript grammar telling: do it.
getDistanceTo(position) // same, but do it with “position”.
setFeelings // another skill of me, accessed by the “.”
setFeelings({ inLove: true }); // the skill, with some instructions (anobject).

假設(shè)這是一首人類讀得懂的詩，你可能已經(jīng)理解了其中的信息，也可能看到了需要遵循的JavaScript語言規(guī)則與需要提出的內(nèi)容（變量）之間有何區(qū)別。

但機器又會怎么做呢？

如果是機器（瀏覽器）讀取這首詩，那就會識別為錯誤。機器需要一個“me”和“you”的定義，因為它試圖訪問其屬性（通過在me.getDistanceTo()中的“.”來訪問）。有了上面提到的區(qū)分能力，實際上你可以設(shè)計“me”和“you”,讓計算機能夠執(zhí)行或讀取詩，如下所示：

// This is how the definition of a being (me/you)could look like
var me = {
 position: {x: 0, y: 0} // some coordinates, maybe
 getDistanceTo: function(position) {
 // calculate the distance, relative to own position
 },
 setFeelings: function(feelings) {
 // handle those feelings…
 }
}
var you = {
 position: {x: 0, y: 0} // some coordinates, maybe
}
// the poem itself
if (me.getDistanceTo(you.position) < 200) {
 me.setFeelings({
 inLove: true,
 });
}

那么在這里發(fā)生了什么？

· 為了讓人們理解，讀取一首用JavaScript“語法”編寫而成的JavaScript詩；

· 在理解信息之后，為理解詩的結(jié)構(gòu)（JavaScript的語法和基礎(chǔ)知識），對規(guī)則、詞匯和變量進行了區(qū)分；

· 通過這種區(qū)分后，使用JavaScript規(guī)則設(shè)計了其余的詩歌變量，使其可以通過機器（在瀏覽器中）運行。

這可以做到，因為處理JavaScript，就像處理英語語言一樣。

更大的例子：交互式代碼詩歌

LoveBits是一種代碼學(xué)習(xí)或用代碼講故事的體驗。

LoveBits：基于JavaScript的代碼詩歌項目

它試圖通過以下方式讓人們對JavaScript或代碼感興趣：

· 將可讀性和人類語言放在第一位；

· 將代碼與讀者可能熟知的藝術(shù)形式相結(jié)合。

故事情節(jié)與兩個比特（矩形狀）有關(guān)；其中一個比特（blueBit）是浪漫主義者，為另一個比特（purpleBit）寫出JavaScript的愛情詩。

啟動LoveBits時，可選擇其中一首愛情詩（由JavaScript代碼編寫而成）。每首詩都有一個代碼片段，不甚熟悉編程的人都能理解其中的編寫方式。這個項目唯一的要求就是要懂英語。

例如，“l(fā)ove at first sight”(實際上是LoveBits詩歌中的一首)講述的是這兩個比特之間的故事，詩中，blueBit大致是這么說的，“If I get close enough toyour position, I will ‘set my feelings’ to inLove: true.”

這些詩歌的特殊之處在于你可以通過點擊下面的“play”按鈕,“run”或“play”它們。在“Love at first sight”的詩中，你會見到一個藍色和紫色的矩形以及一個數(shù)字。正如你猜到的那樣，它們就是詩中提到的兩個比特，而blueBit下面的數(shù)字實際上是blueBit和purpleBit之間的距離。

正如詩歌所暗示的那樣，你可能想要通過減少它們之間的距離讓blueBit愛上purpleBit。那要怎么做呢？可以和blueBit互動，把它拖來拖去，讓它墜入愛河。但要小心，有時結(jié)果可不只一種。

實際上有人可能會說程序員成為了這里的機器，但程序員才是需要解釋JavaScript代碼，并采取行動幫助兩個數(shù)字生物墜入愛河的那個人。

未來將何去何從？

如果你是個奮力拼搏的開發(fā)者，試著將JavaScript視為人類語言吧，只了解需首先執(zhí)行的代碼片段就夠了，不必去考慮它們最終運行的結(jié)果。

進一步的建議：

· 永遠優(yōu)先選擇能將規(guī)則、詞匯和變量組合在一起形成應(yīng)用程序邏輯的整個應(yīng)用程序；

· 應(yīng)用程序邏輯會講故事，這些故事將幫你填補上述代碼示例中的空白。代碼庫和實用程序（如lodash）只能提供新的詞匯表，在你能閱讀和理解JavaScript代碼后會有所幫助;

· 檢查現(xiàn)有代碼，并嘗試將其分解為具有反映其功能名稱的小函數(shù)。編寫適用于人和機器的代碼，編寫出可以像句子一樣閱讀的代碼，并在需要的地方加以注釋。思考：怎么用人類語言（向另一個開發(fā)者）表述這個代碼？

結(jié)論

將代碼視為人類語言而不是外星人發(fā)明的東西，學(xué)習(xí)代碼就會更容易。學(xué)習(xí)區(qū)分語言屬性（內(nèi)置）和應(yīng)用程序邏輯的變量/自定義代碼至關(guān)重要。理解了應(yīng)用程序邏輯，你就無需了解語言特征即可作出改進和更改。

學(xué)習(xí)基礎(chǔ)知識前需明白：理解了任一代碼片段的信息，JavaScript的基礎(chǔ)知識自然就能隨之掌握。有多少次你聽到有人說：“我能看懂這種語言，但我還不會說。”這是一個自然過程，能夠并可能適用于人類語言和編碼語言的學(xué)習(xí)。

此外，請牢記代碼有明確的功能性目的，但也并非總是如此。即使是人類語言，曾經(jīng)也只滿足純粹的功能性需求，后來才出現(xiàn)了詩歌甚至歌曲（說到這，有人對JavaScript歌曲感興趣嗎？）這些以截然不同方式使人們密切相聯(lián)的語言形式。這同樣適用于編程語言。

留言點贊關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

歡迎關(guān)注全平臺AI垂類自媒體 “讀芯術(shù)”

說明：

1.1 拿來即能用，老少男女皆可為，適合為自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音樂的3d圖片展示。

1.2 推薦指數(shù)：★★★★

1.3 適合收藏，代碼已經(jīng)親測過，建議谷歌瀏覽器，其他瀏覽器沒測試，+微軟vscode編輯器。

2 效果

3 準備工作：

3.1 圖片準備：6張jpg圖片：命名為：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夾img中。

3.2 背景音樂準備：選一個喜歡的背景音樂：簡單一點就是命名為：tiantian.mp3（和我一樣，這樣圖片和音樂都不需要去修改代碼）。

3.3 vue.js文件需要去官網(wǎng)下載，也可以直接引用，建議下載比較好，因為斷網(wǎng)也能使用。

3.3.1 直接引用如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.3.2 下載vue.js，以前說過怎么辦？復(fù)習(xí)一下。

復(fù)制上面的網(wǎng)頁地址，你懂的，到瀏覽器中打開，按ctrl+a全選，復(fù)制到本地，新建一個txt，黏貼上去，保存，再重新命名為：vue.js,即可。

4.如上圖，圖片、背景音樂、vue.js準備好了。

========================

接下來是代碼部分：一個一個來

========================

5.index.html代碼：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue.js立方體旋轉(zhuǎn)播放特效</title>
<!--注意引入js和css文件，但是后面還有一個vueapp.js文件放在后面引用-->
<script src="./vue.js"></script>
<link rel="stylesheet" href="./3dbox.css">
<link rel="stylesheet" href="./gunball.css">
</head>
<body>
    <!--gunball設(shè)置-->
	<div class="container">
		<div class="cube cube--1">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--2">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--3">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
	</div>

	<!--音樂盒div-->
	<div id="app">
		<div class="main">
			<ul class="box" id="box" :class="infoShow?'play':'pause'">
				<li v-for="(item,index) in list" :key="item.index" :class="{imgOpen:item.imgShow}">
					<img :src="item.imgUrl" />
				</li>
			</ul>
			<dl class="minBox" id="minBox">
				<dd v-for="(item,index) in list" :key="item.index">
					<img :src="item.imgUrl" />
				</dd>
			</dl>
		</div>
		<audio src="./tiantian.mp3" ref="vd"></audio>
        <!--音樂和圖片展示動畫開關(guān)-->
		<div class="content-info" @click="cirClick">
			<span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'關(guān)閉':'打開'}}</span>
		</div>
	</div>
</body>
<!--音樂盒的vue設(shè)置，必須放在音樂盒div后面這里引用-->
<script src="./vueapp.js"></script>
</html>

6 vueapp.js文件代碼：

var app = new Vue({
		el: "#app",
		data() {
			return {
				list: [
					{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },
					{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },
					{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },
					{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },
					{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },
					{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }
				],
				openShow: false,
				mirrorNum: 0,
				imgTimer: null,
				rotateY: 0,
				imgIndex: -1,
				listTimer: null,
				boxTimer: null,
				infoShow: false,
				miaoTimer: null,
				catSpeed: 0,
				catTimer: null,
				closeSpeed: -1,
				closeTimer: null
			}
		},
		mounted: function() {},
		methods: {
			imgMove() {
				var oBox = document.getElementById('box');
				var oMinBox = document.getElementById('minBox');
				this.boxTimer = setInterval(() => {
					this.rotateY += 3;
					oBox.style.transform = 'perspective(800px) translateZ(-20px)  rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';
					oMinBox.style.transform = 'perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';
				}, 200)
			},
			cirClick() {
				this.infoShow = !this.infoShow
				var oBox = document.getElementById('box');
				var aPupil = document.getElementsByClassName('pupil')
				var oCat = document.getElementById('cat');
				var aLi = oBox.getElementsByTagName('li');
				if(this.infoShow) {
					clearInterval(this.imgTimer);
					this.imgTimer = setInterval(() => {
						this.imgIndex++;
						this.list[this.imgIndex].imgShow = true;
						if(this.imgIndex >= 5) {
							clearInterval(this.imgTimer);
							this.imgIndex = 0
						}
					}, 300);
					this.imgMove();
					for(var i = 0; i < aPupil.length; i++) {
						aPupil[i].style.top = '7px',
							aPupil[i].style.left = '30px'
					}
					this.$refs.vd.play()
					this.catTimer = setInterval(() => {
						var catNum = parseInt(this.$refs.vd.duration) / 2
						if(parseInt(this.$refs.vd.currentTime) >= catNum) {
							this.catSpeed -= 10;
						} else {
							this.catSpeed += 10;
						}
						if(parseInt(this.$refs.vd.currentTime) >= parseInt(this.$refs.vd.duration)) {
							clearInterval(this.catTimer);
							this.infoShow = false;
							clearInterval(this.boxTimer);
							for(var i in this.list) {
								this.list[i].imgShow = false;
							}
						}
						oCat.style.transform = 'perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';
					}, 300)
				} else {
					clearInterval(this.boxTimer);
					clearInterval(this.imgTimer);
					clearInterval(this.catTimer);
					for(var i = 0; i < aPupil.length; i++) {
						aPupil[i].style.top = '28px',
							aPupil[i].style.left = '0px'
					}
					this.$refs.vd.pause();
					for(var i in this.list) {
						this.list[i].imgShow = false;
					}
				}
			}
		}
	})

7 3dbox.css文件的代碼：

* {
	margin: 0px;
	padding: 0px;
}

/*3d正方體的圖片大小畫布設(shè)置*/
.main {
	width: 400px;
	height: 400px;
	margin: 0px auto;
	position: relative;
}
/*音樂盒=3d正方體大小設(shè)置*/
.box {
	transform-style: preserve-3d;
	position: absolute;
	width: 240px;
	height: 240px;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -120px;
	transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
	z-index: 5;
	animation: imgMove 5s linear;
}
/*圖片動畫設(shè)置*/
@keyframes imgMove {
	0%{
		transform: rotateX(-20deg)rotateY(-20deg);
	}
	30%{
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	60% {
		transform: rotateX(-160deg)rotateY(-160deg);
	}
	90% {
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	120%{
		transform: rotateX(-320deg)rotateY(-320deg);
	}
	150%{
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	180% {
		transform: rotateX(-180deg)rotateY(-180deg);
	}
	210% {
		transform: rotateX(-120deg)rotateY(-120deg);
	}
	240% {
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	300% {
		transform: rotateX(-60deg)rotateY(-60deg);
	}
	360% {
		transform: rotateX(-20deg)rotateY(20deg);
	}
}

.box li {
	list-style: none;
	width: 240px;
	height: 240px;
	position: absolute;
	opacity: 0.8;
}
.box li img {
	width: 240px;
	height: 240px;
	vertical-align: middle;
}
.box li:nth-child(1) {
	transform: translateZ(120px);
	-webkit-transform: translateZ(120px);
}
.box li:nth-child(2) {
	transform: rotateX(90deg) translateZ(120px);
	-webkit-transform: rotateX(90deg) translateZ(120px);
}
.box li:nth-child(3) {
	transform: translateZ(-120px);
	-webkit-transform: translateZ(-120px);
}
.box li:nth-child(4) {
	transform: rotateX(90deg) translateZ(-120px);
	-webkit-transform: rotateX(90deg) translateZ(-120px);
}
.box li:nth-child(5) {
	transform: rotateY(90deg) translateZ(120px);
	-webkit-transform: rotateY(90deg) translateZ(120px);
}
.box li:nth-child(6) {
	transform: rotateY(90deg)translateZ(-120px);
	-webkit-transform: rotateY(90deg)translateZ(-120px);
}
.box .imgOpen {
	opacity: 0.6;
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}
.minBox {
	transform-style: preserve-3d;
	position: absolute;
	width: 120px;
	height: 120px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -30px;
	transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}
.minBox dd {
	width: 120px;
	height: 120px;
	position: absolute;
	z-index: 4;
}
.minBox dd img {
	width: 120px;
	height: 120px;
	vertical-align: middle;
}
.minBox dd:nth-child(1) {
	transform: translateZ(60px);
	-webkit-transform: translateZ(60px);
}
.minBox dd:nth-child(2) {
	transform: rotateX(90deg) translateZ(60px);
	-webkit-transform: rotateX(90deg) translateZ(60px);
}
.minBox dd:nth-child(3) {
	transform: translateZ(-60px);
	-webkit-transform: translateZ(-60px);
}
.minBox dd:nth-child(4) {
	transform: rotateX(90deg) translateZ(-60px);
	-webkit-transform: rotateX(90deg) translateZ(-60px);
}
.minBox dd:nth-child(5) {
	transform: rotateY(90deg) translateZ(60px);
	-webkit-transform: rotateY(90deg) translateZ(60px);
}
.minBox dd:nth-child(6) {
	transform: rotateY(90deg)translateZ(-60px);
	-webkit-transform: rotateY(90deg)translateZ(-60px);
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}

/*音樂和圖片展示的開關(guān)設(shè)置*/
.play {
	animation-play-state: running !important;
}
.pause {
	animation-play-state: paused !important;
}

.content-info {
	/*開關(guān)的文字寬度設(shè)置*/
	width: 300px;
	text-align: center;
	/*字體大小設(shè)置*/
	font-size: 100px;
	position: absolute;
	left:300px;
	transform-style: preserve-3d;
	transform: perspective(800px) scale(0.3) translateZ(-20px);
}

8 gunball.css文件的代碼：

BODY {
  /*body的設(shè)置是全局的，也會影響到正方體音樂圖片的展示*/
  -webkit-perspective: 40em;
          perspective: 40em;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  overflow: hidden;
  /*注意這個字體大小，不僅僅設(shè)置gunball的大小，也影響音樂盒的圖片展示*/
  font-size: 14px;
  background: #000;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-size: 1em 10%;
}

.container {
  width: 15em;
  height: 15em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 12s infinite linear;
          animation: rotate 12s infinite linear;
}

.cube {
  /*保持gunball大小不變形*/
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube--2 {
  -webkit-transform: rotateX(45deg) rotateY(45deg);
          transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
          transform: rotateX(45deg) rotateZ(45deg);
}

.side {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border: 2px dotted rgba(255, 213, 0, 0.35);
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.side::before, .side::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side::before {
  width: 0.5em;
  height: 0.5em;
  color: gold;
}
.side::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(-1em);
          transform: translateZ(-1em);
  box-shadow: inset 0 0 1em, 0 0 1em;
  color: teal;
}

.side--back {
  -webkit-transform: translateZ(-2em) rotateY(180deg);
          transform: translateZ(-2em) rotateY(180deg);
}

.side--left {
  -webkit-transform: translateX(-2em) rotateY(-90deg);
          transform: translateX(-2em) rotateY(-90deg);
}

.side--right {
  -webkit-transform: translateX(2em) rotateY(90deg);
          transform: translateX(2em) rotateY(90deg);
}

.side--top {
  -webkit-transform: translateY(-2em) rotateX(90deg);
          transform: translateY(-2em) rotateX(90deg);
}

.side--bottom {
  -webkit-transform: translateY(2em) rotateX(-90deg);
          transform: translateY(2em) rotateX(-90deg);
}

.side--front {
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
}

.side__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em;
  color: orangered;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side__inner::before {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: crimson;
}
.side__inner::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: purple;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

BODY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

9 注意幾個問題：

9.1 vueapp.js為什么只能放在后面引用，前面引用行不行？感興趣的可以去試試。

9.2 vue.js布局和純html布局的不同，可以思考思考。

9.3 不想思考也沒事，拿來就可以使用。注意背景音樂的命名：tiantian.mp3，6張圖片命名：jt1.jpg，復(fù)制vue.js即可。簡單使用，小白就會。

分享出來。

在線咨詢

上一篇：快速了解JavaScript文本框操作
下一篇：「紹棠」網(wǎng)頁中禁止右鍵，禁止f12，禁止ctrl+s等