Looking Glass推出新穎的全息圖像格式網(wǎng)頁代碼嵌入像視頻一樣簡單

家名叫 Looking Glass 的全息顯示公司，正在積極推廣一種新穎的 3D 圖像格式。可知藝術(shù)家們能夠在廣泛使用的 3D 藝術(shù)軟件上進(jìn)行制作，并在大多數(shù)終端硬件上予以展示。由 Looking Glass 官網(wǎng)演示可知，3D 藝術(shù)家們可將其作品轉(zhuǎn)換為這種全息圖像格式、并將之輕松嵌入到幾乎任何網(wǎng)頁上。

官網(wǎng)截圖（來自：Holograms on the Internet）

Looking Glass 表示：與普通 2D 屏幕截圖相比，被稱作“全息圖”（holograms）的新格式，允許大家從更多角度來欣賞 3D 藝術(shù)作品。

其原理是使用數(shù)十張快照來渲染，最終輸出為類似立體模型的圖像。訪客能夠滑動鼠標(biāo)指針、或通過移動設(shè)備上的觸屏來操縱這些 3D 圖像。

Render Once Share to billions（via）

根據(jù)分辨率的不同，示例 3D 圖像的文件尺寸在 2~50 MB 不等。雖然 Looking Glass 更希望大家在其全息顯示器上領(lǐng)略這種新 3D 圖像格式，但該技術(shù)也兼容普通 PC 顯示器、移動設(shè)備和 VR 頭顯。

感興趣的朋友，可嘗試將他們用 Blender、Unity 或 Unreal Engine 制作的內(nèi)容轉(zhuǎn)換為 Looking Glass 推薦的全息圖格式。

后續(xù) Looking Glass 還將很快添加對 C4D、Zbrush、Procreate、nerfies，以及移動肖像模式（mobile portrait mode）等相片格式的轉(zhuǎn)換支持。

如有需要，你可隨時將托管于 Looking Glass 服務(wù)器上的引用代碼，嵌入到網(wǎng)頁的 HTML 代碼中。其體驗類似于嵌入 YouTube 或 Vimeo 視頻，而無需在網(wǎng)站上發(fā)布 GIF 動圖。

展望未來，該公司還計劃推出基于全息影像的貨幣化選項。雖然 Looking Glass 尚未披露具體將如何實現(xiàn)，但我們可以暢想廣告、藝術(shù)銷售、以及格式轉(zhuǎn)換工具等領(lǐng)域。

樣先放最終效果圖：

動圖演示：

一邊聽歌一邊截的動圖，所以圖片下面有歌詞閃過，大家忽視就好。

整個圖像其實可以分為三個部分，一是藍(lán)黑色的背景，二是三朵若隱若現(xiàn)的白云，三是這只往前跳的小兔子，背景可以直接在body里設(shè)置，因此我們的HTML主題部分就只需要下面兩個div：

<div class="rabbit"></div>
<div class="clouds"></div>

接著CSS里開始設(shè)置樣式，先是整體的背景：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(midnightblue, black);
 font-size: 20px;
 margin-top: 2em;
 overflow: hidden;
}

引申一點相關(guān)知識：上面的CSS代碼里display：flex其實是彈性布局，采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

flex布局有以下6個屬性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

其中，我們的代碼里面用到的justify-content：center定義了項目在主軸上的對齊方式為center。

接下來設(shè)置小白兔：

.rabbit {
 width: 5em;
 height: 3em;
 color: whitesmoke;
 background: 
 radial-gradient(
 circle at 4.2em 1.4em,
 #333 0.15em,
 transparent 0.15em
 ), /* eye */
 currentColor;
 border-radius: 70% 90% 60% 50%;
 box-shadow: -0.2em 1em 0 -0.75em #333;
 z-index: 1;
 animation: hop 1s linear infinite;
}

大體都是一些基礎(chǔ)的設(shè)置，這里著重介紹一下 animation: hop 1s linear infinite;這句。

animation是CSS3里的一個動畫設(shè)置，使用上面的代碼，將把 animation 綁定到一個hop這個div元素，因此我們需要寫一個hop來實現(xiàn)小白兔前后跳動的動畫：

@keyframes hop {
 20% {
 transform: rotate(-10deg) translate(1em, -2em);
 box-shadow: -0.2em 3em 0 -1em #333;
 }
 40% {
 transform: rotate(10deg) translate(3em, -4em);
 box-shadow: -0.2em 3.25em 0 -1.1em #333;
 }
 60%, 75% {
 transform: rotate(0deg) translate(4em, 0);
 box-shadow: -0.2em 1em 0 -0.75em #333;
 }
}

就這樣，我們得到了一個光頭往前跳動的小白兔：

其實還挺可愛的~

下面我們給小兔子加上耳朵：

.rabbit::before {
 content: '';
 position: absolute;
 width: 0.75em;
 height: 2em;
 background-color: currentColor;
 border-radius: 50% 100% 0 0;
 transform: rotate(-30deg);
 top: -1em;
 right: 1em;
 border: 0.1em solid;
 border-color: gainsboro transparent transparent gainsboro;
 box-shadow: -0.5em 0 0 -0.1em;
 }

加上耳朵后如下：

加上尾巴和影子：

.rabbit::after {
 content: '';
 position: absolute;
 width: 1em;
 height: 1em;
 background-color: currentColor;
 border-radius: 50%;
 left: -0.3em;
 top: 0.5em;
 box-shadow:
 0.5em 1em 0,
 4em 1em 0 -0.2em,
 4em 1em 0 -0.2em;
 animation: kick 1s infinite linear;
}

最后，給小白兔加上四周的白云：

.clouds {
 width: 2em;
 height: 2em;
 color: whitesmoke;
 background: currentColor;
 border-radius: 100% 100% 0 0;
 transform: translate(0, -5em);
 animation: cloudy 1s infinite linear forwards;
 filter: opacity(0);
}

云的動畫以及細(xì)節(jié)調(diào)整這里就不在贅述了，再來看一張最終效果圖：

今天的小練習(xí)就到這里啦。

需要完整代碼的朋友可以留言或私信我獲取。

個 CSS3 loading 動畫庫，簡單易用，動畫流暢，無論是學(xué)習(xí)還是使用，都很不錯。

關(guān)于 Loaders.css

Loaders.css 是一個性能出色的 web 前端代碼庫，或者叫 CSS 庫，因為它完全沒有用到一行 js 代碼或者圖片，僅僅利用純 CSS 就實現(xiàn)多種樣式的 loading 動畫，運(yùn)行流暢絲滑，輕量小巧，性能優(yōu)秀。

loaders-css 官網(wǎng)

Loaders.css 技術(shù)特性

純 CSS 實現(xiàn)，沒有多余的代碼，唯一的依賴就是瀏覽器，非常輕量
性能出眾，相比于用 javascript 計算繪圖和布局來實現(xiàn) loading，Loaders.css 使用的是 CSS3 的動畫屬性和 transform 變形，能極大地利用電腦或手機(jī)的圖形硬件性能，所以極為流暢
提供將近 30 個不同樣式的 loading 動畫，復(fù)制粘貼拿來就可以用

loading 效果預(yù)覽

多年使用體驗和感受

loading 動畫是前端開發(fā)收到的頻次很高的需求，特別是前后端分離的開發(fā)模式，數(shù)據(jù)都是異步加載的。以前做 loading 都是一張 菊花.gif 走天下，但現(xiàn)在產(chǎn)品開發(fā)要求變高，咱們的追求也變高了，特別是移動端，顯示加載動畫前還得加載一個動圖，這早就 out 了。

直到發(fā)現(xiàn)了 Loaders.css，為這些年來上千次的 loading 實現(xiàn)節(jié)省了大量的時間和精力。雖然官方支持 npm 安裝和 jQuery 的方式引入，但我更建議面對要求不高的場景，直接復(fù)制對應(yīng)的動畫樣式即可，不需要引入 CSS，這是極致的按需取用。

使用開發(fā)者工具查看代碼

面對外觀要求的加載場景，我們可以修改 CSS 屬性來達(dá)到精準(zhǔn)定制的要求來符合產(chǎn)品的調(diào)性，無論是移動端還是 pc 端都非常好用，而且也是一個很好的 CSS3 動畫學(xué)習(xí)研究對象。

得益于 Loaders.css 毫無依賴\高性能\輕量化\免費(fèi)開源的特點，開發(fā)者們又陸續(xù)根據(jù) Loaders.css 構(gòu)建了用于其他技術(shù)平臺甚至是 iOS \ android 原生的動畫庫：

React 版本：react-loaders
Vue 版本：vue-loaders
Angular 版本：Masadow
ember 版本：ember-cli-loaders
iOS 版本：DGActivityIndicatorView
Android 版本：Loaders.CSS-Android-App

免費(fèi)開源說明

Loaders.css 是一個免費(fèi)開源的前端 CSS 動畫庫，基于 MIT 開源協(xié)議托管在 Github 上，任何人和商業(yè)機(jī)構(gòu)都可以免費(fèi)下載使用。

Loaders.css 官網(wǎng)在國內(nèi)訪問不太穩(wěn)定，經(jīng)常有打不開的情況，大家也可以直接訪問 Loaders.css 的 Github 主頁獲取源碼。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點擊查看本次分享的網(wǎng)址。

Loaders.css - 純 CSS 打造的免費(fèi)開源加載動畫，絲滑流暢高性能！｜那些免費(fèi)的磚

在線咨詢

上一篇：解密HTML5未來行業(yè)發(fā)展方向
下一篇：html5的video標(biāo)簽實現(xiàn)m3u8格式的支持，基于hls.min.js

您的項目需求

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