html5表白页面3d,七夕节表白3d相册制作(html5+css3)
七夕節(jié)表白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;
/* 調(diào)用動畫 */
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);
}
其中代碼還存在一些優(yōu)化，讀者自行優(yōu)化。
祝讀者們早日脫單！！！
總結
以上是生活随笔為你收集整理的html5表白页面3d,七夕节表白3d相册制作(html5+css3)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android让一个控件跟上面控件对其,
- 下一篇： html创建文件域的代码,word如何插