七夕節表白3d相冊制作

涉及知識點

定位

陰影

3d轉換

動畫

主要思路：

通過定位將所有照片疊在一起，在設置默認的樣式以及照片的布局，最后通過設置盒子以及照片的旋轉動畫來達到效果。

代碼如下：

3d相冊

/* 使用單位將所有照片疊在一起 */

img{

width: 200px;

position: absolute;

/* 照片加陰影 */

box-shadow: 0 0 8px black;

/* 照片圓角 */

border-radius: 5px;

}

#album{

width: 200px;

height: 267px;

margin: 250px auto;

/* 父元素設置保留3d效果,這樣子子元素的3d效果就可以顯示出來 */

transform-style: preserve-3d;

/* 調用動畫 */

animation: xuanzhuan 20s linear infinite;

}

body{

/* 設置視距,更好的觀察3d效果 */

perspective: 800px;

background-image: url(image/bg2.jpg);

overflow: hidden;

}

@keyframes xz{

/* 設置每張照片獨自的旋轉效果動畫 */

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(360deg);

}

}

@keyframes xuanzhuan{

/* 設置整個照片容器的旋轉動畫 */

from{

transform: rotateY(0deg);

}

to{

transform: rotateY(360deg);

}

}

#album div[class^="box"] {

transform-style: preserve-3d;

}

#album div[class^="box"] img {

animation: xz 20s linear infinite;

}

/* 設置每張圖片的默認旋轉樣式以及布局 */

#album .box1 {

transform: rotateY(0deg) translateZ(200px);

}

#album .box2 {

transform: rotateY(60deg) translateZ(200px);

}

#album .box3 {

transform: rotateY(120deg) translateZ(200px);

}#album .box4 {

transform: rotateY(180deg) translateZ(200px);

}

#album .box5 {

transform: rotateY(240deg) translateZ(200px);

}

#album .box6 {

transform: rotateY(300deg) translateZ(200px);

}

其中代碼還存在一些優化，讀者自行優化。

祝讀者們早日脫單！！！

總結

以上是生活随笔為你收集整理的html5表白页面3d,七夕节表白3d相册制作(html5+css3)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。