3d相册案例
效果图:
css样式如下:
@charset "utf—8";
* {
margin: 0;
padding: 0;
}
/* 设置html背景色 */
html {
background: linear-gradient(#032861 0%, #000 80%);
background: url(../img/preview.png);
height: 100%;
width: 100%;
overflow: hidden;
}
/* 给星星设置样式 */
.wall {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
/* 让星星动起来 */
div#mindground {
background: url("../img/midground.png");
overflow: hidden;
animation: dd 30s linear infinite;
}
div#foreground {
background: url(../img/foreground.png);
overflow: hidden;
animation: dd 15s linear infinite;
}
@keyframes dd {
0% {
background-position: 0 0;
}
100% {
background-position: 500% 0;
}
}
/* 给相册盒子设定大小 */
.wrap {
height: 200px;
width: 200px;
margin: 2