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)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为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)

灰暗色调

以下展示了灰色到黑色的渐变

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安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

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字，预计学习时长25分钟或更长

对很多人来说，学写代码很难。本文将通过编写与众不同且富有诗意的代码来克服学习代码最初遇到的困难。如果你是个JavaScript新手，或者是在编程学习过程中遇到了困难，本文介绍的方法也许可以帮到你。

为什么学习编程这么难？

以下是人们对编程很难学及JavaScript（或任何编程语言）很枯燥的一些误解：

· 代码晦涩难懂令人望而生畏，只有实用功能毫无乐趣；

· 代码仅适用于机器，人们无法与它交流或参与其中；

· 代码不算一种语言，因为它与一般语言的用法截然不同，形式上的差别也很大；

· 提到程序员，人们就会想到邪恶的黑客或黑客帝国的成员等刻板形象，因此没有认同感。

未接触编程的人

开发人员需要以一种非常特殊的方式看待代码，甚至要以一种完全不同且高度逻辑化的方式来思考。编程语言非常严格，对错误零容忍，单个字符就可能使机器无法理解人们的意思，并使应用程序奔溃。学习编程时，应将之前学习人类语言时的读写规则归零（顺便说一下，在学习一种新的人类语言时也是如此）。

但并非网上的编程语言、文档或视频教程都是针对“从人类语言到编程语言的转换”这一思维而编写的。当然，他们也没有必要这样做。毕竟，写代码的主要是为了告诉机器要做什么。

鉴于此目的，没有机会对这两种语言进行比较，因此人类的语言（包括词汇和语法规则）似乎对学习编程语言毫无用处。JavaScript语言中没有“爱”这个词，“我爱你。”这句话在其中也没有意义。机器（或浏览器）根本不理解爱。这种“闻所未闻”、“无从下手”的感觉可能会让人感到害怕。

第一次接触编程的人

这就是本文的意义所在，借助已掌握的人类语言知识，将JavaScript看作一种人类语言，以一种更容易、更具艺术性的方式来学习它。举个小例子来说明吧！

一个有趣的事实是，一些编程语言实际上已经从一种编程语言转换到另一种编程语言。这就是为什么掌握多种编程语言变得简单多了——只学一门编程语言就够啦。

一个小例子

例如，在很多情况下，要想运行JavaScript代码，需要准备好“文档”（基本上是网站，用户每次访问时都在下载），以便与HTML元素进行交互。在纯JavaScript语言中，可能会偶然发现以下内容。

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

或者有时像这样：

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

上述第一个代码肯定需要加以解释，而对第二个代码（也许需要一些想象），可以这样理解：满足了必需的某个条件后，后续步骤仅通过观察就能进行下去。

试想这样的场景：

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

连小孩都能理解“Once upon a time” (“曾几何时”)这样的内容。这种内容在与开发者对话（通过唤起他们的童年回忆），同时在理论上也能做开发。这就是“让人类语言转换为编码语言”的想法。

关于“functions（函数）”的简要说明：函数基本来说是一种技能，在调用之前处于休眠状态。“To read”是function read() { …}}的一项技能，想读取某内容时就写成这样：read()，就会调用才会调用该函数。还有一种是“匿名函数”，即function(){ … }（没有名字，就像上面的代码片段那样），它基本上是“一次性的临时操作”，甚至不算一种技能，例如“按下按钮”。

扭转乾坤：从信息到基础

要更进一步了解这个想法，可将上述的原因和误解颠倒过来：

一首小诗，

用JavaScript语言编写。

为人类而写，

讲述两个人之间的爱。

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

它不具有功能性，目前也不适用于机器，只是方便人们阅读和理解。

如果你能看懂这首诗，你实际上是理解了一段JavaScript代码，也许你还会拿来与英语进行比较。

现在你可能会问自己：我理解这一点，但它为什么这么写呢？这种语言背后的规则（语法）是什么呢？“me”在技术层面是什么意思？为什么这段代码看起来很像英语？

规则、词汇和变量

学习编程语言时，最重要的事情之一就是理解变量的概念。

每一种人类语言都有其规则（语法）和大量词汇（意思均已知）。显然，只有先学习这两点才会说这种语言。

与许多其它编程语言一样，JavaScript也有一套规则（例如，单词之间要加“.”或如何编写“if”语句）和词汇（if、document、window、Event等）。这些关键字由JavaScript（和浏览器）所有（或“预先定义”），并且每个关键字都有其特定用途。

就像之前提到的那样，似乎没有机会去和英语中的单词和句子做比较，因为JavaScript中根本没有对应的词和句子。

这就是引入变量这个概念的原因，开发人员可以（甚至必须）定义变量，以便让机器和开发人员理解某些东西代表什么。变量可以采用多种形式（因此得名）：它们可以是一串单词和字母（字符串）、数字、操作（函数）、甚至集合（数组），不胜枚举。

在所有人类语言中，可能都有一个关于“love”的词，你大概明白它是什么意思，但不太肯定，因为它太主观了。但无论怎样，还是有一个词可以形容它。

但在JavaScript中，如果不定义“love”，就没有与之对应的表达，至于形式，则完全取决于你。

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”)

区分JavaScript中预定义的内容（JavaScript规则和词汇表）与开发人员实际自定义的内容（也称为“应用程序逻辑”或“业务逻辑”）十分重要。

回到上面写的诗：

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

这些表达式来自以下JavaScript词汇表规则集：

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).

假设这是一首人类读得懂的诗，你可能已经理解了其中的信息，也可能看到了需要遵循的JavaScript语言规则与需要提出的内容（变量）之间有何区别。

但机器又会怎么做呢？

如果是机器（浏览器）读取这首诗，那就会识别为错误。机器需要一个“me”和“you”的定义，因为它试图访问其属性（通过在me.getDistanceTo()中的“.”来访问）。有了上面提到的区分能力，实际上你可以设计“me”和“you”,让计算机能够执行或读取诗，如下所示：

// 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,
 });
}

那么在这里发生了什么？

· 为了让人们理解，读取一首用JavaScript“语法”编写而成的JavaScript诗；

· 在理解信息之后，为理解诗的结构（JavaScript的语法和基础知识），对规则、词汇和变量进行了区分；

· 通过这种区分后，使用JavaScript规则设计了其余的诗歌变量，使其可以通过机器（在浏览器中）运行。

这可以做到，因为处理JavaScript，就像处理英语语言一样。

更大的例子：交互式代码诗歌

LoveBits是一种代码学习或用代码讲故事的体验。

LoveBits：基于JavaScript的代码诗歌项目

它试图通过以下方式让人们对JavaScript或代码感兴趣：

· 将可读性和人类语言放在第一位；

· 将代码与读者可能熟知的艺术形式相结合。

故事情节与两个比特（矩形状）有关；其中一个比特（blueBit）是浪漫主义者，为另一个比特（purpleBit）写出JavaScript的爱情诗。

启动LoveBits时，可选择其中一首爱情诗（由JavaScript代码编写而成）。每首诗都有一个代码片段，不甚熟悉编程的人都能理解其中的编写方式。这个项目唯一的要求就是要懂英语。

例如，“love 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”的诗中，你会见到一个蓝色和紫色的矩形以及一个数字。正如你猜到的那样，它们就是诗中提到的两个比特，而blueBit下面的数字实际上是blueBit和purpleBit之间的距离。

正如诗歌所暗示的那样，你可能想要通过减少它们之间的距离让blueBit爱上purpleBit。那要怎么做呢？可以和blueBit互动，把它拖来拖去，让它坠入爱河。但要小心，有时结果可不只一种。

实际上有人可能会说程序员成为了这里的机器，但程序员才是需要解释JavaScript代码，并采取行动帮助两个数字生物坠入爱河的那个人。

未来将何去何从？

如果你是个奋力拼搏的开发者，试着将JavaScript视为人类语言吧，只了解需首先执行的代码片段就够了，不必去考虑它们最终运行的结果。

进一步的建议：

· 永远优先选择能将规则、词汇和变量组合在一起形成应用程序逻辑的整个应用程序；

· 应用程序逻辑会讲故事，这些故事将帮你填补上述代码示例中的空白。代码库和实用程序（如lodash）只能提供新的词汇表，在你能阅读和理解JavaScript代码后会有所帮助;

· 检查现有代码，并尝试将其分解为具有反映其功能名称的小函数。编写适用于人和机器的代码，编写出可以像句子一样阅读的代码，并在需要的地方加以注释。思考：怎么用人类语言（向另一个开发者）表述这个代码？

结论

将代码视为人类语言而不是外星人发明的东西，学习代码就会更容易。学习区分语言属性（内置）和应用程序逻辑的变量/自定义代码至关重要。理解了应用程序逻辑，你就无需了解语言特征即可作出改进和更改。

学习基础知识前需明白：理解了任一代码片段的信息，JavaScript的基础知识自然就能随之掌握。有多少次你听到有人说：“我能看懂这种语言，但我还不会说。”这是一个自然过程，能够并可能适用于人类语言和编码语言的学习。

此外，请牢记代码有明确的功能性目的，但也并非总是如此。即使是人类语言，曾经也只满足纯粹的功能性需求，后来才出现了诗歌甚至歌曲（说到这，有人对JavaScript歌曲感兴趣吗？）这些以截然不同方式使人们密切相联的语言形式。这同样适用于编程语言。

留言点赞关注

我们一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

说明：

1.1 拿来即能用，老少男女皆可为，适合为自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音乐的3d图片展示。

1.2 推荐指数：★★★★

1.3 适合收藏，代码已经亲测过，建议谷歌浏览器，其他浏览器没测试，+微软vscode编辑器。

2 效果

3 准备工作：

3.1 图片准备：6张jpg图片：命名为：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夹img中。

3.2 背景音乐准备：选一个喜欢的背景音乐：简单一点就是命名为：tiantian.mp3（和我一样，这样图片和音乐都不需要去修改代码）。

3.3 vue.js文件需要去官网下载，也可以直接引用，建议下载比较好，因为断网也能使用。

3.3.1 直接引用如下：

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

3.3.2 下载vue.js，以前说过怎么办？复习一下。

复制上面的网页地址，你懂的，到浏览器中打开，按ctrl+a全选，复制到本地，新建一个txt，黏贴上去，保存，再重新命名为：vue.js,即可。

4.如上图，图片、背景音乐、vue.js准备好了。

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

接下来是代码部分：一个一个来

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

5.index.html代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue.js立方体旋转播放特效</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设置-->
	<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>
        <!--音乐和图片展示动画开关-->
		<div class="content-info" @click="cirClick">
			<span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'关闭':'打开'}}</span>
		</div>
	</div>
</body>
<!--音乐盒的vue设置，必须放在音乐盒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正方体的图片大小画布设置*/
.main {
	width: 400px;
	height: 400px;
	margin: 0px auto;
	position: relative;
}
/*音乐盒=3d正方体大小设置*/
.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;
}
/*图片动画设置*/
@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);
}

/*音乐和图片展示的开关设置*/
.play {
	animation-play-state: running !important;
}
.pause {
	animation-play-state: paused !important;
}

.content-info {
	/*开关的文字宽度设置*/
	width: 300px;
	text-align: center;
	/*字体大小设置*/
	font-size: 100px;
	position: absolute;
	left:300px;
	transform-style: preserve-3d;
	transform: perspective(800px) scale(0.3) translateZ(-20px);
}

8 gunball.css文件的代码：

BODY {
  /*body的设置是全局的，也会影响到正方体音乐图片的展示*/
  -webkit-perspective: 40em;
          perspective: 40em;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  overflow: hidden;
  /*注意这个字体大小，不仅仅设置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，复制vue.js即可。简单使用，小白就会。

分享出来。

在线咨询

上一篇：快速了解JavaScript文本框操作
下一篇：「绍棠」网页中禁止右键，禁止f12，禁止ctrl+s等