利用python爬蟲爬取網(wǎng)站音樂

近我想在網(wǎng)站上下載幾首音樂放到我的u盤里聽，但是上網(wǎng)上一找，各大音樂網(wǎng)站下載歌曲（尤其是好聽的歌曲）都需要vip。

對(duì)于像我這樣的窮人來說，肯定是不會(huì)花幾十塊錢去下載幾首音樂啦，而且作為程序員，充錢去下載音樂那也是不可能的，于是我花了一天時(shí)間，上網(wǎng)找了各種資料來學(xué)習(xí)一下怎樣才能不花錢白嫖到網(wǎng)站上的音樂。

當(dāng)然，方法還是有很多種的，最后我還是選擇了一種最簡(jiǎn)單，最方便的一種方法： python爬蟲。下面，我就跟大家分享一下我在用python爬蟲時(shí)遇到的坑。

下面，我以爬取某易云音樂為例，介紹一下我時(shí)如何學(xué)習(xí)python爬蟲的：

思路:

音樂從哪里來？---網(wǎng)站的服務(wù)器里
怎么從網(wǎng)址里得到音樂？---向網(wǎng)站發(fā)起網(wǎng)絡(luò)請(qǐng)求
刪選音樂文件
下載音樂文件

具體實(shí)現(xiàn)

1. 引入發(fā)送網(wǎng)絡(luò)請(qǐng)求的第三方庫(kù)

import requests # 發(fā)送網(wǎng)絡(luò)請(qǐng)求的第三方庫(kù)
復(fù)制代碼

安裝方法

pip install requests

引入數(shù)據(jù)解析第三方庫(kù)

from lxml import etree # 數(shù)據(jù)解析第三方庫(kù)
復(fù)制代碼

安裝方法

pip install lxml

某易云音樂網(wǎng)站列表url為'https://music.163.com/#/discover/toplist?id=3778678'

url='https://music.163.com/#/discover/toplist?id=3778678'
復(fù)制代碼

發(fā)送請(qǐng)求獲取頁(yè)面數(shù)據(jù)

response=requests.get(url=url) # 請(qǐng)求頁(yè)面數(shù)據(jù)
復(fù)制代碼

解析數(shù)據(jù)

html=etree.HTML(response.text) # 解析頁(yè)面數(shù)據(jù)
復(fù)制代碼

獲取所有歌曲標(biāo)簽集合（ a標(biāo)簽 ）

id_list=html.xpath('//a[contains(@href,"song?")]')  # 所有歌曲id集合
復(fù)制代碼

下載歌曲

base_url='http://music.163.com/song/media/outer/url?id=' # 下載音樂網(wǎng)址前綴
# 下載音樂url=網(wǎng)址前綴 + 音樂id
for data in id_list:
    href=data.xpath('./@href')[0]
    music_id=href.split('=')[1] # 音樂id
    music_url=base_url + music_id # 下載音樂url
    music_name=data.xpath('./text()')[0] # 下載音樂名稱
    music=requests.get(url=music_url)
    # 將下載的音樂以文件形式保存下來
    with open('./music/%s.mp3' % music_name, 'wb') as file:
         file.write(music.content)
         print('<%s>下載成功' % music_name)
復(fù)制代碼

遇到的坑

以上的方法我是從一個(gè)視頻里學(xué)到的，那個(gè)視頻是半年前出的，可能當(dāng)時(shí)這種方法還好使，但是今天我在用這種方法下載音樂文件的時(shí)候突然就報(bào)錯(cuò)了。

首先，編輯器報(bào)錯(cuò)找不到 music_name 和 music_id ,我仔細(xì)一看，獲取的id_list集合里（也就是標(biāo)簽集合里）的id根本不是id，是代碼，估計(jì)在這里音樂網(wǎng)站也做了相應(yīng)的反扒機(jī)制。

其次，我自己在網(wǎng)站里找到了一首音樂獲取了它的id并把id賦值給music_id，結(jié)果當(dāng)用外鏈下載音樂時(shí)報(bào)錯(cuò)460，顯示網(wǎng)絡(luò)擁擠，估計(jì)下載音樂的網(wǎng)址也不好使了。

base_url='http://music.163.com/song/media/outer/url?id='
music_id='1804320463.mp3'
music_url=base_url + music_id
music=requests.get(url=music_url)
print(music.text)
復(fù)制代碼

{"msg":"網(wǎng)絡(luò)太擁擠，請(qǐng)稍候再試！","code":-460,"message":"網(wǎng)絡(luò)太擁擠，請(qǐng)稍候再試！"}e

最后，我打印出music_url,點(diǎn)擊進(jìn)去，還是可以聽歌和下載的，不知道這是為什么了

base_url='http://music.163.com/song/media/outer/url?id='
music_id='1804320463.mp3'
music_url=base_url + music_id
# music=requests.get(url=music_url)
print(music_url)
復(fù)制代碼

music.163.com/song/media/…

總結(jié)

現(xiàn)在的網(wǎng)站技術(shù)更新太快，很多網(wǎng)站都有了高級(jí)反爬機(jī)制，畢竟嘛，有些東西還是不能隨隨便便就給你的，我寫這篇文章主要是跟大家分享一下我學(xué)習(xí)python爬蟲時(shí)的一些經(jīng)驗(yàn)，同時(shí)，我也想請(qǐng)教各位大神，像遇到了我這種問題了，我應(yīng)該怎么辦才能將這個(gè)網(wǎng)站的音樂文件爬到我的本地電腦里，還請(qǐng)各大神指點(diǎn)一二。

現(xiàn)跑馬燈的方法很多，其中最簡(jiǎn)單的是采用一句Html代碼來實(shí)現(xiàn)，我們?cè)谛枰霈F(xiàn)跑馬燈效果的地方插入“<marquee>滾動(dòng)的文字</marquee>”語(yǔ)句，它的效果如下所示：

滾動(dòng)的文字

適當(dāng)?shù)倪\(yùn)用<marquee>標(biāo)簽的參數(shù)，可以表現(xiàn)出不同的效果，請(qǐng)看下面的幾個(gè)例子：

1、左右彈來彈去的跑馬燈

彈來彈去跑馬燈! 實(shí)現(xiàn)的方法就是在IE的標(biāo)簽上稍微多加了幾個(gè)參數(shù)產(chǎn)生了更加豐富的變化。設(shè)置behavior=alternate表示雙向移動(dòng)，direction=left表示運(yùn)動(dòng)方向向左。marquee的寬度可以使用絕對(duì)象素值，例如width=200等這個(gè)值限定了跑馬燈滾動(dòng)的范圍。需要說明的是該效果在 Netscape下是看不到的。

源碼粘貼框：

<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>

２、跑的很快的跑馬燈

跑的很快跑馬燈!　只要在<marquee>標(biāo)簽后面加上“scrollamount=15”即可,修改=后邊的數(shù)字參數(shù)即可限制文字移動(dòng)的速度。

３、帶有超級(jí)鏈接的跑馬燈

帶超級(jí)鏈接的跑馬燈!點(diǎn)我試試？還有一條呢!點(diǎn)我試試？　實(shí)現(xiàn)的方法很簡(jiǎn)單，把整個(gè)<marquee></marquee>語(yǔ)句包含在超鏈接中就行，你看看下面的代碼就清楚了。當(dāng)然你也可以把包含在<marquee></marquee>中的各條內(nèi)容分別加上不同的鏈接，這樣的跑馬燈就可用來發(fā)布滾動(dòng)新聞或是做站點(diǎn)導(dǎo)航了。

如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認(rèn)是宋體，換體就要加代碼），只要在文字前加上就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號(hào)，如果想讓字體加粗，就再加上。

請(qǐng)看一下效果： 帶超級(jí)鏈接的跑馬燈!點(diǎn)我試試？ 還有一條呢!點(diǎn)我試試？上面效果的代碼碼如下：

<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk>帶有超鏈接的跑馬燈!點(diǎn)我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點(diǎn)我試試？</a> </marquee>

以上幾個(gè)例子都是<marquee>標(biāo)簽參數(shù)的應(yīng)用，下面把所有可以利用的參數(shù)列在表中供你參考，不過還是要提醒你，<marquee>標(biāo)簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。

參數(shù)用法介紹behavior=scroll, slide, alternate跑馬方式：循環(huán)繞行，只跑一次就停住，來回往復(fù)運(yùn)動(dòng)direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數(shù)：循環(huán)100次，如不寫默認(rèn)為一直循環(huán)width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數(shù)越大越快scrolldelay=500跑馬延時(shí)：毫秒數(shù)，利用它可實(shí)現(xiàn)躍進(jìn)式滾動(dòng)hspace=20，vspace=20跑馬區(qū)域與其它區(qū)域間的空白大小bgcolor=#00FFCC跑馬區(qū)域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號(hào)STRONG跑馬燈文字加粗

你已經(jīng)看到，盡管<marquee>參數(shù)不少，但畢竟不能實(shí)現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會(huì)采用JavaScript來實(shí)現(xiàn)跑馬燈。

說明：

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

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

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

2 效果

3 準(zhǔn)備工作：

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

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

3.3 vue.js文件需要去官網(wǎng)下載，也可以直接引用，建議下載比較好，因?yàn)閿嗑W(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)頁(yè)地址，你懂的，到瀏覽器中打開，按ctrl+a全選，復(fù)制到本地，新建一個(gè)txt，黏貼上去，保存，再重新命名為：vue.js,即可。

4.如上圖，圖片、背景音樂、vue.js準(zhǔn)備好了。

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

接下來是代碼部分：一個(gè)一個(gè)來

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

5.index.html代碼：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue.js立方體旋轉(zhuǎn)播放特效</title>
<!--注意引入js和css文件，但是后面還有一個(gè)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>
        <!--音樂和圖片展示動(dòng)畫開關(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;
}
/*圖片動(dòng)畫設(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è)置是全局的，也會(huì)影響到正方體音樂圖片的展示*/
  -webkit-perspective: 40em;
          perspective: 40em;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  overflow: hidden;
  /*注意這個(gè)字體大小，不僅僅設(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 注意幾個(gè)問題：

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

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

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

分享出來。

在線咨詢

上一篇：費(fèi)用報(bào)銷申請(qǐng)單怎么填寫？費(fèi)用報(bào)銷申請(qǐng)單填寫指南（建議
下一篇：javascript控制同一頁(yè)面中的音頻和視頻控件同

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。