使用 HTML 和 CSS 创建一个专辑封面图库，以网格布局显示歌曲专辑、CD、影视专辑等作品封面，每个封面都带有 3D 透视效果和阴影，并且无缝衔接CD卡片素材，此外该效果还支持自定义相册封面的外观，包括大小、位置和阴影效果，使用该网格布局的专辑封面图款能体现出专辑的专业以及帮助用户更直观地浏览不同的专辑封面。

下面讲解如何使用 HTML 和 CSS 创建专辑封面图库

1.首先，在 HTML 文档的 head 标签中添加以下链接，预加载需要的 gif 图像（如果有gif图片需求的话，gif一般比较大，不是必须）。

<link rel="preload" as="image" href="./assets/images/postmalone.gif" />

2、为图库创建 HTML 结构。打开 HTML 文件，创建一个 <div> 元素，类名为 "cover-score-wrapper"，在该 div 中，创建另一个类名为 "cover-score "的 div。这将作为专辑封面的容器。在 "cover-score "div 中，您可以通过创建多个类名为 "cover "的 <div> 元素来添加单个专辑封面。在每个封面 div 中，包含显示专辑封面图片所需的元素。

/*这里仅部分示例代码，下载后查看完整版代码*/
<div class="cover-score-wrapper">
  <div class="cover-score" style="opacity: 1;">

    <!-- Jay Z -->
    <div class="cover" style="width: 120px;">
      <div class="shelf"></div>
      <div class="shelf-shadow"></div>
      <div class="cover-img cover-img-active" data-shadow-color="16,26,64" style="height: 120px; transform: perspective(730px) rotateX(14deg) rotateY(-1deg); box-shadow: rgba(16, 26, 64, 0) 0px 0px 1px, rgba(16, 26, 64, 0.1) -4px 1px 3px, rgba(16, 26, 64, 0.1) -11px 4px 6px, rgba(16, 26, 64, 0.1) -22px 8px 10px, rgba(16, 26, 64, 0.1) -37px 14px 15px, rgba(16, 26, 64, 0.1) -57px 21px 21px;">
        <div class="plastic" style="transform: translate(-1px, 0px);"></div>
        /*这里是放gif图片的地方，如果不放不影响整体效果，放了以后会覆盖下面的静态图片*/
        <div class="image-card" style="background-image:url(./assets/images/jayz.gif); background-size: cover;"></div>

        <div style="background-image: url(./image/ab67616d0000b2732a0e1044519b4da374703952);" class="img-fake"></div>
        
        <div class="cd"></div>
      </div>
    </div>

    /*这里更多专辑放这里*/

  </div>
</div>

3、现在，让我们使用 CSS 为相册封面设计样式，可以自定义相册封面的外观，包括大小、位置和阴影效果。利用 CSS 属性（如 background-image、background-size、box-shadow 和 transform）来实现所需的外观。

/*这里仅部分示例代码，下载后查看完整版代码*/
.cover-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  height: 100%;
  position: fixed;
  z-index: 100000;
  pointer-events: none;
}