今天我們來(lái)做一個(gè)炫一點(diǎn)的3D動(dòng)畫效果，動(dòng)畫效果是C3中新增的屬性，今天這個(gè)效果很適合我們平時(shí)娛樂(lè)時(shí)做，如果你覺(jué)得效果太單調(diào)也可以自行添加一些其他特效哦，以下圖片也可以替換成自己的圖片哦

這個(gè)視屏就是動(dòng)畫的效果哦

Video_2020-12-26

HTML布局

html的布局結(jié)構(gòu)簡(jiǎn)單，下面就不做過(guò)多的解釋了，其代碼如下：

<div class="container"><div class="box1 a"></div><div class="box2 a"></div><div class="box3 a"></div><div class="box4 a"></div><div class="box5 a"></div><div class="box6 a"></div><div class="small"><div class="pox1 b"></div><div class="pox2 b"></div><div class="pox3 b"></div><div class="pox4 b"></div><div class="pox5 b"></div><div class="pox6 b"></div></div></div>

CSS代碼如下

<style>* {padding: 0;margin: 0;}/* 外面大盒子容器 */.container {width: 500px;height: 500px;margin: 500px auto;position: relative;/* 3d視圖效果 */transform-style: preserve-3d;perspective: 1000px;}/* 大盒子公共屬性設(shè)置 */.a {width: 500px;height: 500px;position: absolute;/* 透明度為0.8 */opacity: .8;}/* 里面的小容器 */.small {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;left: 150px;top: 150px;}/* 小容器里的圖片公共樣式 */.b {width: 200px;height: 200px;position: absolute;opacity: .8;}/* 此為正面圖片,不旋轉(zhuǎn),沿著Z軸向前動(dòng)盒子一半的寬度即250px */.box1 {background-image: url(./images/1.jpg);transform: rotateX(0deg) translateZ(250px);}/* 此為后面圖片,沿著Z軸向前移動(dòng)盒子一半的寬度即250px，沿X軸旋轉(zhuǎn)180度， */.box2 {background-image: url(./images/2.jpg);transform: rotateX(180deg) translateZ(250px);}/* 此為右面的圖片，,沿著Z軸向前移動(dòng)盒子一半的寬度即250px,沿Y軸轉(zhuǎn)90度， */.box3 {background-image: url(./images/3.jpg);transform: rotateY(90deg) translateZ(250px);}/* 此為左面的圖片，,沿著Z軸向前移動(dòng)盒子一半的寬度即250px,沿Y軸轉(zhuǎn)90度， */.box4 {background-image: url(./images/7.jpg);transform: rotateY(-90deg) translateZ(250px);}/* 此為上面的圖片，,沿著Z軸向前移動(dòng)盒子一半的寬度即250px,沿Y軸轉(zhuǎn)90度， */.box5 {background-image: url(./images/8.jpg);transform: rotateX(90deg) translateZ(250px);}/* 此為下面的圖片，,沿著Z軸向前移動(dòng)盒子一半的寬度即250px,沿Y軸轉(zhuǎn)90度， */.box6 {background-image: url(./images/6.jpg);transform: rotateX(-90deg) translateZ(250px);}/* 小盒子原理與大盒子原理相同 */.pox1 {background-image: url(./images/01.jpg);transform: rotateX(0deg) translateZ(100px);}.pox2 {background-image: url(./images/02.jpg);transform: rotateX(180deg) translateZ(100px);}.pox3 {background-image: url(./images/03.jpg);transform: rotateY(90deg) translateZ(100px);}.pox4 {background-image: url(./images/04.jpg);transform: rotateY(-90deg) translateZ(100px);}.pox5 {background-image: url(./images/05.jpg);transform: rotateX(90deg) translateZ(100px);}.pox6 {background-image: url(./images/06.jpg);transform: rotateX(-90deg) translateZ(100px);}.container {/* 為大盒子開啟動(dòng)畫效果，動(dòng)畫名稱為go,5秒完成一次，勻速轉(zhuǎn)動(dòng)，沒(méi)有延遲，無(wú)數(shù)次 */animation: go 5s linear 0s infinite;}.small {/* 為小盒子開啟動(dòng)畫效果，動(dòng)畫名稱為go,2秒完成一次，勻速轉(zhuǎn)動(dòng)，沒(méi)有延遲，無(wú)數(shù)次 */animation: go 2s linear 0s infinite;}@keyframes go {0% {transform: rotate3d(0.5, 0.5, -0.5, 0deg);}100% {transform: rotate3d(0.5, 0.5, -0.5, 360deg);}}/* 同上同上，只是鼠標(biāo)經(jīng)過(guò)時(shí)移動(dòng)距離變大了 */.container:hover .box1 {transform: rotateX(0deg) translateZ(350px);}.container:hover .box2 {transform: rotateX(180deg) translateZ(350px);}.container:hover .box3 {transform: rotateY(90deg) translateZ(350px);}.container:hover .box4 {transform: rotateY(-90deg) translateZ(350px);}.container:hover .box5 {transform: rotateX(90deg) translateZ(350px);}.container:hover .box6 {transform: rotateX(-90deg) translateZ(350px);}</style>

這樣就完成了一個(gè)好看的動(dòng)畫效果了，快去發(fā)給你們的女朋友吧，哈哈哈！！！

總結(jié)

以上是生活随笔為你收集整理的3D炫彩动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。