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é)及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(){ … }(沒有名字,就像上面的代碼片段那樣),它基本上是“一次性的臨時操作”,甚至不算一種技能,例如“按下按鈕”。
要更進一步了解這個想法,可將上述的原因和誤解顛倒過來:
一首小詩,
用JavaScript語言編寫。
為人類而寫,
講述兩個人之間的愛。
// Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }
它不具有功能性,目前也不適用于機器,只是方便人們閱讀和理解。
如果你能看懂這首詩,你實際上是理解了一段JavaScript代碼,也許你還會拿來與英語進行比較。
現(xiàn)在你可能會問自己:我理解這一點,但它為什么這么寫呢?這種語言背后的規(guī)則(語法)是什么呢?“me”在技術(shù)層面是什么意思?為什么這段代碼看起來很像英語?
學(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ā)者)表述這個代碼?
將代碼視為人類語言而不是外星人發(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即可。簡單使用,小白就會。
分享出來。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。