整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
說明：
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即可。簡單使用，小白就會。
分享出來。
SS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
為了在所有瀏覽器中的元素的寬度和高度設置正確的話，你需要知道的盒模型是如何工作的。
元素的寬度和高度
重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.
下面的例子中的元素的總寬度為300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
讓我們自己算算：
250px (寬)
+ 20px (左 + 右填充)
+ 10px (左 + 右邊框)
+ 20px (左 + 右邊距)
=300px
試想一下，你只有250像素的空間。讓我們設置總寬度為250像素的元素:
實例
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的兼容性問題
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、盒模型概述
在“CSS盒子模型”理論中，所有頁面中的元素都可以看成一個盒子，并且占據著一定的頁面空間。
盒子模型是由content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）這四個屬性組成的。
屬性我們可以把它轉移到我們日常生活中的盒子（箱子）來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。
二、標準盒模型結構圖
三、盒模型屬性
border （邊框）元素邊框
margin （外邊距）用于定義頁面中元素與元素之間的距離
padding （內邊距）用于定義內容與邊框之間的距離
content （內容）可以是文字或圖片
1、內容區
內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他的3部分都是可選的。
內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區而言，并不包括padding部分。
當內容信息太多時，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。對于overflow這個屬性，我們在后面會詳細講解到。
2、內邊距
內邊距，指的是內容區和邊框之間的空間，可以被看做是內容區的背景區域。
關于內邊距的屬性有4種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個方向的簡潔內邊距屬性padding。
3、邊框
在CSS盒子模型中，邊框跟我們之前學過的邊框是一樣的。
邊框屬性有border-width、border-style、border-color以及綜合了3類屬性的快捷邊框屬性border。
其中border-width指定邊框的寬度，border-style指定邊框類型，border-color指定邊框的顏色。
“border-width:1px;border-style:solid;border-color:gray;”等價于“border:1px solid gray;”。
4、外邊距
外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。
外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。
外邊距的屬性也有4種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個方向的簡潔內邊距屬性margin。
5.屬性的簡寫形式：
方法是按照規定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區別，具體含義如下：
* 如果給出2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性，如padding:20px 30px;/*上下、左右*/；
*如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下邊框的屬性，如padding:30px 20px 10px;/*上、左右、下*/；
*如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序，如padding:30px 20px 10px 40px;/*上、右、下、左*/。
課后練習：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
