html5表白页面3d,七夕节表白3d相册制作(html5+css3)
七夕节表白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);
}
其中代码还存在一些优化，读者自行优化。
祝读者们早日脱单！！！
七夕节表白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); } 其中代码还存在一些优化，读者自行优化。 祝读者们早日脱单！！！