整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家名叫 Looking Glass 的全息顯示公司，正在積極推廣一種新穎的 3D 圖像格式?？芍囆g家們能夠在廣泛使用的 3D 藝術軟件上進行制作，并在大多數終端硬件上予以展示。由 Looking Glass 官網演示可知，3D 藝術家們可將其作品轉換為這種全息圖像格式、并將之輕松嵌入到幾乎任何網頁上。
官網截圖（來自：Holograms on the Internet）
Looking Glass 表示：與普通 2D 屏幕截圖相比，被稱作“全息圖”（holograms）的新格式，允許大家從更多角度來欣賞 3D 藝術作品。
其原理是使用數十張快照來渲染，最終輸出為類似立體模型的圖像。訪客能夠滑動鼠標指針、或通過移動設備上的觸屏來操縱這些 3D 圖像。
Render Once Share to billions（via）
根據分辨率的不同，示例 3D 圖像的文件尺寸在 2~50 MB 不等。雖然 Looking Glass 更希望大家在其全息顯示器上領略這種新 3D 圖像格式，但該技術也兼容普通 PC 顯示器、移動設備和 VR 頭顯。
感興趣的朋友，可嘗試將他們用 Blender、Unity 或 Unreal Engine 制作的內容轉換為 Looking Glass 推薦的全息圖格式。
后續 Looking Glass 還將很快添加對 C4D、Zbrush、Procreate、nerfies，以及移動肖像模式（mobile portrait mode）等相片格式的轉換支持。
如有需要，你可隨時將托管于 Looking Glass 服務器上的引用代碼，嵌入到網頁的 HTML 代碼中。其體驗類似于嵌入 YouTube 或 Vimeo 視頻，而無需在網站上發布 GIF 動圖。
展望未來，該公司還計劃推出基于全息影像的貨幣化選項。雖然 Looking Glass 尚未披露具體將如何實現，但我們可以暢想廣告、藝術銷售、以及格式轉換工具等領域。
樣先放最終效果圖：
動圖演示：
一邊聽歌一邊截的動圖，所以圖片下面有歌詞閃過，大家忽視就好。
整個圖像其實可以分為三個部分，一是藍黑色的背景，二是三朵若隱若現的白云，三是這只往前跳的小兔子，背景可以直接在body里設置，因此我們的HTML主題部分就只需要下面兩個div：
<div class="rabbit"></div> <div class="clouds"></div>
接著CSS里開始設置樣式，先是整體的背景：
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;
}
引申一點相關知識：上面的CSS代碼里display：flex其實是彈性布局，采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
flex布局有以下6個屬性：
其中，我們的代碼里面用到的justify-content：center定義了項目在主軸上的對齊方式為center。
接下來設置小白兔：
.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;
}
大體都是一些基礎的設置，這里著重介紹一下 animation: hop 1s linear infinite;這句。
animation是CSS3里的一個動畫設置，使用上面的代碼，將把 animation 綁定到一個hop這個div元素，因此我們需要寫一個hop來實現小白兔前后跳動的動畫：
@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);
}
云的動畫以及細節調整這里就不在贅述了，再來看一張最終效果圖：
今天的小練習就到這里啦。
需要完整代碼的朋友可以留言或私信我獲取。
個 CSS3 loading 動畫庫，簡單易用，動畫流暢，無論是學習還是使用，都很不錯。
Loaders.css 是一個性能出色的 web 前端代碼庫，或者叫 CSS 庫，因為它完全沒有用到一行 js 代碼或者圖片，僅僅利用純 CSS 就實現多種樣式的 loading 動畫，運行流暢絲滑，輕量小巧，性能優秀。
loaders-css 官網
loading 效果預覽
loading 動畫是前端開發收到的頻次很高的需求，特別是前后端分離的開發模式，數據都是異步加載的。以前做 loading 都是一張 菊花.gif 走天下， 但現在產品開發要求變高，咱們的追求也變高了，特別是移動端，顯示加載動畫前還得加載一個動圖，這早就 out 了。
直到發現了 Loaders.css，為這些年來上千次的 loading 實現節省了大量的時間和精力。雖然官方支持 npm 安裝和 jQuery 的方式引入，但我更建議面對要求不高的場景，直接復制對應的動畫樣式即可，不需要引入 CSS，這是極致的按需取用。
使用開發者工具查看代碼
面對外觀要求的加載場景，我們可以修改 CSS 屬性來達到精準定制的要求來符合產品的調性，無論是移動端還是 pc 端都非常好用，而且也是一個很好的 CSS3 動畫學習研究對象。
得益于 Loaders.css 毫無依賴\高性能\輕量化\免費開源的特點，開發者們又陸續根據 Loaders.css 構建了用于其他技術平臺甚至是 iOS \ android 原生的動畫庫：
Loaders.css 是一個免費開源的前端 CSS 動畫庫，基于 MIT 開源協議托管在 Github 上，任何人和商業機構都可以免費下載使用。
Loaders.css 官網在國內訪問不太穩定，經常有打不開的情況，大家也可以直接訪問 Loaders.css 的 Github 主頁獲取源碼。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點擊查看本次分享的網址。
Loaders.css - 純 CSS 打造的免費開源加載動畫，絲滑流暢高性能?。切┟赓M的磚
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
