整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML 顏色

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

          顏色值

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

          種顏色的最小值是0(十六進制:#00)。最大值是255(十六進制:#FF)。

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

          顏色值

          顏色(Color)顏色十六進制(Color HEX)顏色RGB(Color RGB)
          #000000rgb(0,0,0)
          #FF0000rgb(255,0,0)
          #00FF00rgb(0,255,0)
          #0000FFrgb(0,0,255)
          #FFFF00rgb(255,255,0)
          #00FFFFrgb(0,255,255)
          #FF00FFrgb(255,0,255)
          #C0C0C0rgb(192,192,192)
          #FFFFFFrgb(255,255,255)


          1600萬種不同顏色

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

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

          Red LightColor HEXColor RGB
          #000000 rgb(0,0,0)
          #080000rgb(8,0,0)
          #100000rgb(16,0,0)
          #180000rgb(24,0,0)
          #200000rgb(32,0,0)
          #280000rgb(40,0,0)
          #300000rgb(48,0,0)
          #380000rgb(56,0,0)
          #400000rgb(64,0,0)
          #480000rgb(72,0,0)
          #500000rgb(80,0,0)
          #580000rgb(88,0,0)
          #600000rgb(96,0,0)
          #680000rgb(104,0,0)
          #700000rgb(112,0,0)
          #780000rgb(120,0,0)
          #800000rgb(128,0,0)
          #880000rgb(136,0,0)
          #900000rgb(144,0,0)
          #980000rgb(152,0,0)
          #A00000rgb(160,0,0)
          #A80000rgb(168,0,0)
          #B00000rgb(176,0,0)
          #B80000rgb(184,0,0)
          #C00000rgb(192,0,0)
          #C80000rgb(200,0,0)
          #D00000rgb(208,0,0)
          #D80000rgb(216,0,0)
          #E00000rgb(224,0,0)
          #E80000rgb(232,0,0)
          #F00000rgb(240,0,0)
          #F80000rgb(248,0,0)
          #FF0000rgb(255,0,0)

          灰暗色調(diào)

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

          Gray ShadesColor HEXColor 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)色板時,所有的計算機能夠正確地顯示所有的顏色。

          0000000000330000660000990000CC0000FF
          0033000033330033660033990033CC0033FF
          0066000066330066660066990066CC0066FF
          0099000099330099660099990099CC0099FF
          00CC0000CC3300CC6600CC9900CCCC00CCFF
          00FF0000FF3300FF6600FF9900FFCC00FFFF
          3300003300333300663300993300CC3300FF
          3333003333333333663333993333CC3333FF
          3366003366333366663366993366CC3366FF
          3399003399333399663399993399CC3399FF
          33CC0033CC3333CC6633CC9933CCCC33CCFF
          33FF0033FF3333FF6633FF9933FFCC33FFFF
          6600006600336600666600996600CC6600FF
          6633006633336633666633996633CC6633FF
          6666006666336666666666996666CC6666FF
          6699006699336699666699996699CC6699FF
          66CC0066CC3366CC6666CC9966CCCC66CCFF
          66FF0066FF3366FF6666FF9966FFCC66FFFF
          9900009900339900669900999900CC9900FF
          9933009933339933669933999933CC9933FF
          9966009966339966669966999966CC9966FF
          9999009999339999669999999999CC9999FF
          99CC0099CC3399CC6699CC9999CCCC99CCFF
          99FF0099FF3399FF6699FF9999FFCC99FFFF
          CC0000CC0033CC0066CC0099CC00CCCC00FF
          CC3300CC3333CC3366CC3399CC33CCCC33FF
          CC6600CC6633CC6666CC6699CC66CCCC66FF
          CC9900CC9933CC9966CC9999CC99CCCC99FF
          CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
          CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
          FF0000FF0033FF0066FF0099FF00CCFF00FF
          FF3300FF3333FF3366FF3399FF33CCFF33FF
          FF6600FF6633FF6666FF6699FF66CCFF66FF
          FF9900FF9933FF9966FF9999FF99CCFF99FF
          FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
          FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

          如您還有不明白的可以在下面與我留言或是與我探討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即可。簡單使用,小白就會。

          分享出來。


          主站蜘蛛池模板: 美女福利视频一区二区| 国产激情精品一区二区三区| 日韩一区二区久久久久久| 国产AV国片精品一区二区| 亚洲国产精品一区二区第一页免 | 午夜一区二区免费视频| 国产在线观看一区二区三区| 国产精品亚洲高清一区二区| 日本欧洲视频一区| 亚洲AV无码一区二区三区牛牛| 在线免费视频一区二区| 久久精品国产一区二区三区| 午夜影视日本亚洲欧洲精品一区| 久久中文字幕无码一区二区| 亚洲国产综合无码一区二区二三区 | 国产精品日本一区二区在线播放| 国产精品分类视频分类一区| 老鸭窝毛片一区二区三区| 久久精品国产一区二区三| 国产午夜精品一区二区三区极品| 好湿好大硬得深一点动态图91精品福利一区二区 | 伊人色综合一区二区三区影院视频 | 国模无码视频一区| 看电影来5566一区.二区| 国产成人精品一区二三区熟女| 中文字幕一区二区视频| 亚洲国产AV无码一区二区三区 | 精品人妻中文av一区二区三区| 日本精品啪啪一区二区三区| 一区二区三区在线|欧| 又紧又大又爽精品一区二区| 美女毛片一区二区三区四区| 国产免费一区二区三区免费视频| 午夜AV内射一区二区三区红桃视| 少妇无码AV无码一区| 福利一区在线视频| 亚洲.国产.欧美一区二区三区| 亚洲午夜福利AV一区二区无码| 国产精品免费综合一区视频| 精品一区二区三区在线观看视频| 精品人妻少妇一区二区三区|