家好，今天給大家介紹一款， webgl實(shí)現(xiàn)的動(dòng)態(tài)3d卡片背景特效html頁(yè)面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

鼠標(biāo)懸停的時(shí)候，卡片背景圖片的3d效果會(huì)發(fā)生變化（圖2）

可以用鼠標(biāo)左右拖動(dòng)卡片瀏覽（圖3）

代碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

本源碼編碼：10175，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10175，即可獲取。

就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

定義基本的html標(biāo)簽，我使用的無序列表。

<ul class="card-wrapper">
  <li class="card">
    <img src="../myfile/images/1.jpg" alt="">
    <h3>A Super Wonderful Headline</h3>
    <p>Lorem ipsum sit dolor amit</p>
  </li>
  <!-- 其它li -->
</ul>

接下來使用網(wǎng)格布局創(chuàng)建基本的樣式，并去掉列表的默認(rèn)樣式

.card-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  grid-gap: 1.5rem;
}
.card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
  padding-bottom: 1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
}

img {
  border-radius: 0.5rem 0.5rem 0 0;
  width: 100%;
}

img ~ * {
  margin-left: 1rem;
  margin-right: 1rem;
}

這個(gè)是目前的效果

接下來我們要統(tǒng)一一下圖片的大小和圖片自適應(yīng)的高度變化，可以使用 max 方法，防止用戶視口設(shè)置的太大或者太小導(dǎo)致圖片高度影響布局，需要在 img 標(biāo)簽樣式里面添加2個(gè)樣式

img {
  /* 省略之前的樣式 */
  object-fit: cover;
  height: max(10rem, 30vh);
}

根據(jù)高度的變化會(huì)影響圖片的高度變化，但不會(huì)縮放的太大或者太小。

如果瀏覽器支持 aspect-ratio 屬性的話，也可以把 height 替換一下

img {
  /* 省略之前的樣式 */
  object-fit: cover;
  aspect-ratio：4/3;
}

可以根據(jù)自己的項(xiàng)目需求去設(shè)置的比例。