纯css实现3d相册

最新推荐文章于 2025-03-26 15:10:30 发布

weixin_48920122

最新推荐文章于 2025-03-26 15:10:30 发布

阅读量519

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_48920122/article/details/112547233

版权

本文介绍了如何仅使用CSS技术创建一个3D相册案例，提供了详细的CSS和HTML样式代码，展示了一种视觉效果丰富的网页元素设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章