webgl實現(xiàn)的動態(tài)3d卡片背景特效html頁面源碼

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

圖1

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

圖2

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

圖3

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

圖4

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

就愛UI - 分享UI設(shè)計的點點滴滴

定義基本的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;
}

這個是目前的效果

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

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

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

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

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

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

件很悲傷的事情，距離下個假期還有116天!可是再過12天就是父情節(jié)了，那么，在下個節(jié)日到來之前，趕緊惡補(bǔ)一些新技能吧!

還記得小時候，不管是生日還是過節(jié)，總會收到來自同學(xué)、朋友的祝福卡片，雖然當(dāng)時畫的可能不是那么的漂亮、好看，但是收到賀卡的那一刻卻是無比的開心的。然而現(xiàn)在，無論是生日、節(jié)假日，我們都成功的把它們過成了吃貨節(jié)。逛街、吃飯、唱歌，雖然當(dāng)時樂在其中，可是過后卻總發(fā)覺少了些什么。。。

其實，偶爾也曾想過要重新拾筆，自己親筆畫一張賀卡，可奈何沒有繪畫基礎(chǔ)，手殘黨一枚。也有一段時間曾用過騰訊企鵝郵箱群發(fā)賀卡，然后就沒有然后了。。。

再后來，因為工作接觸到了Edraw億圖圖示軟件，然后又重新激發(fā)了我的這一想法，原因嘛，請看我詳細(xì)說來。。。

億圖軟件

億圖軟件比較方便的一點是它自帶了一個龐大的符號庫，只需要通過拖放的方式就可以快速的制作出精美的節(jié)日賀卡，而且還可以在卡片的任何一個地方創(chuàng)建文本框并進(jìn)行編輯。即使是沒有任何繪畫功底，也可以輕松制作出最具創(chuàng)意和獨(dú)一無二的節(jié)日賀卡。

除此之外億圖還內(nèi)置了一系列精美的圣誕節(jié)賀卡模板，以及大量的免費(fèi)的在線模板，可以幫助我們更快的制作漂亮的賀卡，從而節(jié)省繪圖時間。

繪制賀卡的最終目的當(dāng)然是為了將它贈予朋友或親人，如果你需要郵寄，可以選擇將它打印出來，或者通過電子郵件發(fā)送，可以一鍵導(dǎo)出為PDF、圖片、html等格式，是不是很方便呢!

億圖圖示

在億圖最新8.7版中新增了分享功能，電腦、手機(jī)可以通過瀏覽器就可以打開瀏覽，手機(jī)還可以通過掃描二維碼進(jìn)行瀏覽，也可以很方便的轉(zhuǎn)發(fā)分享給朋友、家人。

Edraw Max

此時此刻，我只想說，等下一個節(jié)日，看我不來個驚喜，給你一個大大的surprise!

溫馨提示：點擊這里：http://www.edrawsoft.cn/viewer/s/?u=6bce5801842181 可以預(yù)覽我分享的文件哦！

在線咨詢

上一篇：HTML-CSS標(biāo)準(zhǔn)盒子模型布局 217
下一篇：CSS還能畫畫？SVG實現(xiàn)可愛的哈士奇和狐貍動畫！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。