整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近大家刷抖音，是否有刷到拉斯維加斯的新地標 「Sphere」：
場館內部的視覺效果非常驚人，其中一個效果讓我虎軀一震：
我的第一想法就是，這個看起來用 CSS 也可以實現嘛？還有 CSS 不能實現的？
本文，就將嘗試使用 CSS，大致還原這個效果。
其實，上述的動畫效果，本質就是一個 3D 立方體。
同時，3D 立方體上每個面存在顏色不一樣的文字，文字和顏色都在隨機變化。
也就是說，我們需要實現一個 3D 立方體：
同時，我們還需要實現這樣一個動畫效果 -- 文字和顏色都在隨機變化的平面效果：
兩者組合一下，再挪動 3D 元素的景深距離，就能實現我們想要的效果！
好，下面我們一個一個實現。
實現一個 3D 立方體，相對另外一個文字和顏色都在隨機變化的平面效果而言，屬于非常非常簡單的一步了。
我們在非常多篇文章中也講過具體的實現方式：
最常見的 3D 圖形，莫過于一個 3D 立方體。
如果沒有上下兩個面，只是一個 4 個面的圖形，大概是這樣：
這樣一個圖形，利用 CSS 3D，如何快速實現呢？
首先，構造這么一個結構：
<div class="perspective">
<div class="container">
<div class="img">3</div>
<div class="img">D</div>
<div class="img">視</div>
<div class="img">圖</div>
</div>
</div>4 個面，就是最內層的 4 個 .img，首先，需要給兩個父容器，設置 3D 的屬性：
.perspective {
perspective: 3000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
}簡單解釋一下：
接下來，就是最為核心的，如何設置 4 個 .img 元素的 3D 變換，使之形成 3D 立方體。
技巧就是：先旋轉，再位移。
這里給出一個俯視效果圖：
以上述 Demo 中的正方體為例子，class 為 .img 的 div 塊的高寬為 400px*400px。那么要利用 4 個 這樣的 div 拼接成一個正方體，需要分別將 4 個 div 繞 Y 軸旋轉 [90°, 180°, 270°, 360°]，再 translateY(200px) 。
值得注意的是，一定是先旋轉角度，再偏移距離，這個順序很重要。
代碼如下：
.img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
}
@for $i from 1 through $imgCount {
.img:nth-child(#{$i}) {
transform: rotateY(($i * 90deg)) translateZ(200px);
}
}效果如下：
此時，可能會覺得圖片太太太大了，此時，我們可以通過給中間層 .container 設置一個恰當的 translateZ 進行視覺大小上的調節。
.container {
transform: translateZ(-3000px);
}這樣，就能得到恰當大小的立方體元素效果：
當然，對于我們這個效果，我們 5 要五個面（前后左右與上方即可），因此，我們基于上述的基礎知識鋪墊，重新實現一個我們需要的框架結構：
<div class="perspective">
<div class="container">
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
</div>
</div>并且，我們希望我們的圖形是一個立方體，只需要稍微改造長寬和 translateZ() 的即可。這樣，我們就能得到一個前后左右與上方 5 個面的立方體元素。
示意效果如下：
OK，立方體我們先放在一邊。
接下來，我們嘗試來實現這個效果：
這個效果如果一個文字用一個 DIV 承載實現，那是非常容易的，但是這樣勢必會造成元素過多，再設置動畫效果，則會導致頁面太為卡頓。
所以，我們需要另辟蹊徑。這里，我們可以使用多層漸變配合 background-clip: text。
首先，我們利用等寬字體，隨機實現一列文字：
<div>ABCDEFGHIJKLMN</div>div {
font-family: monospace;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
color: #fff;
}效果大致如下：
此時，如果我們再利用線性漸變，給每個字符的對應空間（也就 25px x 25px），設置上不同的顏色，大概是這樣：
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
div {
// ...
background: randomLinear(14);
}其中，randomLinear(14) 是一個 SASS 函數，參數 14 表示生成 14 層線性漸變，每一個文字區域的顏色都是隨機的，經過編譯后的其中一種結果如下：
div {
// ...
background: linear-gradient(#feea96 0 25px, #edde42 0 50px, #e2344a 0 75px, #cdab7e 0 100px, #e16c8b 0 125px, #dcdc7d 0 150px, #dcb42a 0 175px, #d6a587 0 200px, #984f71 0 225px, #221e34 0 250px, #5e9a69 0 275px, #a955e4 0 300px, #4e908f 0 325px, #8d177e 0 350px);
}上面，我們按照每間隔 25px 的高度，利用線性漸變隨機設置了一種顏色，最終，能夠得到這么個效果：
此時，我們只需要再設置 background-clip: text，配合透明文字顏色 color: transparent，就可以實現單個 div 內，單列文字，每個字體的顏色都是不一樣的：
div {
// ...
background: randomLinear(14);
background-clip: text;
color: transparent;
}此時，效果如下：
當然，文字顏色可以隨機，那么文字本身也應該隨機。這個不難，我們也可以借助 SASS 函數，編寫一個隨機字符的函數，通過元素的偽元素 content 進行設置。
那么此時，完整的代碼可能是這樣的：
<div></div>$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
div {
position: relative;
width: 25px;
height: 350px;
&::before {
content: randomChars(14);
position: absolute;
font-family: monospace;
background: randomLinear(14);
background-clip: text;
color: transparent;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
}
}這樣，每次 div 內的文字，都是從上面 SASS 函數中 $str 變量中隨機取的：
接下來，我們需要實現文字的隨機跳變，也很好做，我們需要在一開始，隨機生成多個不同的 content，然后，借助 CSS 動畫，進行切換。
div {
&::before {
content: randomChars(14);
--content1: "#{randomChars(14)}";
--content2: "#{randomChars(14)}";
--content3: "#{randomChars(14)}";
--content4: "#{randomChars(14)}";
animation: contentChange 1s infinite;
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}這里，我們一次生成了 5 個 content，其中 4 個用 CSS 變量保存了起來，隨后，在 CSS 動畫中，利用提前生成好的 content，進行字符內容的替換，此時，整個效果如下：
隨機內容有了，單個字體顏色不一樣有了，就差顏色的隨機跳變動畫了，這個也非常好做，我們在多篇文章也提及過，利用 filter: hue-rotate() 可以快速實現內容的顏色切換。
div {
animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}我們利用了 filter: hue-rotate() 加上了步驟動畫（steps），成功的實現了顏色的跳變！效果如下：
當然，我們最終要實現的是整個面隨機顏色加上隨機文字的跳變動畫，只需要在上述的基礎上，利用 SASS 函數，循環重復多列操作即可?；谏鲜鏊袃热莸匿亯|，我們最終的單個面下的動畫效果代碼如下：
<div class="g-container">
<div></div>
// ... 一個 32 個子 div
<div></div>
</div>@use "sass:string";
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
$size: 25;
$count: 41;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
body,
html {
width: 100%;
height: 100%;
background: #000;
font-family: monospace;
}
.g-container {
position: relative;
width: 800px;
height: 800px;
display: flex;
animation: colorChange 1s steps(12) infinite;
div {
position: relative;
width: #{$size}px;
height: 800px;
flex-shrink: 0;
&::before {
position: absolute;
inset: 0;
text-align: center;
font-size: #{$size}px;
width: #{$size}px;
text-align: center;
line-height: #{$size}px;
color: transparent;
}
}
@for $i from 1 to $count {
div:nth-child(#{$i}) {
&::before {
content: randomChars(32);
--content1: "#{randomChars(32)}";
--content2: "#{randomChars(32)}";
--content3: "#{randomChars(32)}";
--content4: "#{randomChars(32)}";
animation: contentChange 1s infinite;
background: randomLinear(32);
background-clip: text;
}
}
}
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}這樣，我們就成功的實現了單個平面下的，顏色隨機，文字隨機，且不斷變化的動畫效果：
有了上面的立方體和單個平面的效果，要實現立體效果就不難了。我們嘗試將兩者結合起來。
改造原有的立方體結構，大致改成如下形式：
.perspective
.container
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div上面采用了 PUG 模板引擎來簡化代碼，編譯后的效果如下：
<div class="perspective">
<div class="container">
<div class="g-panel">
<div></div>
// ... 32 個
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個
<div></div>
</div>
</div>這里，我們只需要實現 5 個面的立方體即可（前后左右以及上方）。
每個 .g-panel，實現一個我們上面鋪墊的單面文字跳變效果，這樣，我們就能得到這么一個立體的 3D 立方體動畫效果：
接下來，我們只需要稍加調試，通過控制 perspective 和 transform: translateZ() 控制視覺上的縱深，將畫面的視角放置于整個立方體之中，即可得到這么個效果：
好，最后，我們模擬文章開頭拉斯維加斯球的效果，讓頂部的平面，向下運動，實現一種天花板往下掉的動畫效果，最終，我們即可使用純 CSS，大致模擬出整個效果：
由于 GIF 錄制問題，實際效果會比 GIF 展示效果更為震撼。
話說：工欲善其事，必先利其器！對于繪制幾個圖形也是如此，選擇一個好的繪圖軟件將會令你事半功倍，快速繪制出各種各樣的幾何圖形。為了方便大家的使用，小編在這里收錄了各類專業幾何圖像設計工具，不僅僅可以輔助你的工作學習，還可以方便你制作各類數學幾何圖形類課件來方便教學。
一、幾何畫板
幾何畫板是由美國Key Curriculum Press公司制作并出版的優秀教育軟件，1996年該公司授權人民教育出版社在中國發行該軟件的中文版。它是一個通用的數學、物理教學環境，提供豐富而方便的創造功能使用戶可以隨心所欲地編寫出自己需要的教學課件。其功能非常強大，可以說是最出色的教學軟件之一，軟件獲取地址參考：http://www.jihehuaban.com.cn/xiazai.html。
正如其名“21世紀動態幾何”，它能夠動態地展現出幾何對象的位置關系、運行變化規律，是數學與物理教師制作課件的“利劍”！該軟件界面簡潔，易于操作，由題標欄、菜單欄、工具欄、狀態欄、繪圖窗口和記錄窗口等組成。工具欄依次是選擇工具（實現選擇，及對象的平移、旋轉、縮放功能）、畫點工具、畫線工具、畫圓工具、文本工具和對象信息工具。在選擇工具和畫線工具按鈕上按住鼠標左鍵停留片刻，會彈出更多的類型工具；選擇對象的方法可以選擇點按、按Shift點按或拖動等方式選中對象。
二、幾何圖形計算軟件
幾何圖形計算軟件是一款面建筑工程常用幾何圖形計算軟件，可以快速計算出幾何圖形的體積、表面積以及側表面積，支持長方體、交叉圓柱體、棱臺、棱錐、球、球帶體、球缺等幾何圖形的計算，并且使用非常簡單，只需輸入相關數據即可以及給出結果，方便實用。
三、Z+Z智能教育平臺
Z+Z智能教育平臺是為我國基礎數學教育量身定做的數學教育軟件，是知識性和智能型相結合的、多功能的教育工具平臺，包括超級畫板、立體幾何、網絡畫板等軟件。適合于中學數學、物理教師進行課件制作、課堂演示以及課題研究的工具平臺，也是一套適合于學生開展動手實踐、自主探索、合作交流的學科實驗室。
四、PhysicsEditor (box2d形狀編輯器)
PhysicsEditor是一款box2d形狀生成器，只需點點鼠標即可生成plist圖形文件，還有很有特色的魔術棒工具，可自動完成標記定點和分隔polygon的過程。。該工具屬于物理屬性的編輯器，相當純凈，附帶的Helper文件，可以且僅僅幫我管理shape和物理屬性，不負責bodydef, fixturedef的代碼，這可以讓設計更加靈活隨意。它最強的地方在于魔術棒工具，上面那個杯子的shape頂點，只需要點一下魔術棒就自動完成了標記頂點和分隔polygon的過程。
五、幾何表達式
幾何表達式是一款世界領先的交互式符號幾何系統。幾何圖形可以按符號約束或者數字領域進行定義。繪圖上的測量與計算不再是唯一的單純的近似數字了(世界上大多數乃至幾乎全部的軟件對于度量與計算都是這樣的)，它可以是精確的明確符號或公式，相當于數學式子的推導。通過參數、符號來定義軌跡可以為您的繪圖帶來強大的生命力。
幾何表達式可以作為一個單獨程序使用，或者通過 MathML 輸入和輸出，與您所喜愛的數學系統配合使用，當然還可以把幾何表達式作為您的代數系統的平面幾何軟件，或者考慮把該軟件作為幾何系統的代數擴展，也可考慮把該軟件作為數學方面互不干預的獨立系統。
以上就是當下比較流行的幾款幾何圖形繪圖軟件，每個軟件的優點不同，使用的側重點也不一樣，大家在使用的時候可以自行選擇，希望以上整理對大家有幫助。
文立體排版由純代碼構建
內容為教師節主題排版設計
文末有教師節設計素材福利
想學更多 H5 硬技術？點擊報名▼
點
擊
太
陽
兩
次
↓
您
是賦
輕我
風槳
，葉
以
力
量
。
土我
壤枝
，芽
以
滋
養
。
祝
福教
您師
，節
快
樂
！
絕大多數新媒體排版，只在二維平面上展開視覺體。本期，我們為各位品牌主介紹兩種讓畫面更呼之欲出的三維立體排版法。
低面多邊形設計
普通的圖片之所以不立體，是因為：
畫質被微信壓縮，立體保真度降低；
用戶無法與圖像互動，無法觸手可得；
若要圖像完全無損，我們很容易想到采用 JZ 和微信團隊共同推出的 SVG 高級解決方案。但是 JZ 曾在《SVG 交互式圖文的系統適配與優化問題》提醒過讀者們，SVG 在微信圖文內并不支持漸變。
而「漸變」似乎又是立體內容的標配之一：因為在光照渲染之下，物體必然有大量漸變的效果存在。
有沒有折衷的辦法？如果你是設計師出身，或許就會想到 LOW POLY 設計（低面多邊形）。由于這種三維表現手法中，一切事物都又多個連續平面（四邊形或三角形）組合而成，所以單個平面上的光照分布基本均勻，可以不存在漸變關系，但整體上依舊提供了超強的立體感官。
以下為部分低面多邊形設計范例▼
立體感十足吧？而且制作這類圖像的方式并不算太難，如果你熟悉 C4D（Cinema 4D）的話，可以現在軟件內構造好模型。
接下來，第一種方式是在「TAGS」中生成模型的素描材質球▼
并且將對線條的設置，調整為「邊沿」而不是「邊緣」▼
當然如果你想利用其表面填充也無妨，隨后在 C4D 中導出為 AI，并獲得如下結構。并基于你的設計能力進行逐步的色彩還原▼
當然，對于結構簡單的模型，我們也可以偷個懶，直接從 C4D 烘焙出一張位圖效果，隨后通過 AI 的描摹形成矢量稿，最終通過 SVG 代碼的方式注入圖文中。
當然更重要的是，要給低面多邊形設計內容預留交互內容。比如在本文的示范中，小風車通過點擊太陽可以開始轉動，就讓用戶有了觸手可得的體驗。
CSS 文本立體設計
我們要介紹的第二種三維立體微信圖文排版則和文字有關，這個設計相對來說也更廣為人知一些。
文字（可選中的 TEXT 形態）立體設計有如下要點：通過<text-shadow>連續疊加形成文字“厚度”；通過<text-shadow>連續柔化形成文字“陰影”；如果需要產生視角傾斜的話，通過<transform:skew>視情況變形；
如果手動調這些參數，有時候效率比較低，這里推薦一個可視化調控工具▼
http://tools.jb51.net/aideddesign/css3_textshadow
因而一個常規的文本陰影通常按如下方式書寫。三位數分別表示水平偏移、垂直偏移、和模糊半徑：
text-shadow:1px -1px 0px #333333;
而設計立面文字，其實并沒有真的使文字立體，而是通過給文字連續排列多重無模糊陰影，而在視覺上形成立體（iPaiban 有非傾斜立面字的基本模板可用）：
<section style="margin:0.5rem auto;">
<section style="width:100%;
text-align: center;
transform:skew(0deg,30deg);
padding:1rem;
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
height:auto;
overflow:hidden;
color: #fff;
text-shadow:0.5px -1px 0 #ddd,
0.5px -1.1px 0 #dadada,
0.5px -1.2px 0 #ccc,
0.5px -1.3px 0 #cacaca,
0.5px -1.4px 0 #aaa,
1px -1px 1px rgba(0,0,0,.1),
1px -3px 5px rgba(0,0,0,.3),
1px -5px 7px rgba(0,0,0,.2),
1px -7px 9px rgba(0,0,0,.25),
1px -9px 11px rgba(0,0,0,.2),
1px -19px 21px rgba(0,0,0,.15);
">
<p style="margin: 0px; text-align: center;">
<span style="font-size: 1rem;">測</span>
</p>
<p style="margin: 0px;">
<span style="font-size: 1rem;">試</span>
</p>
<p style="margin: 0px;">
<span style="font-size: 1rem;">范</span>
</p>
<p style="margin: 0px;">
<span style="font-size: 1rem;">例</span>
</p>
<p style="margin: 0px; text-align: center;">
<br/>
</p>
<p style="margin:0">
<br/>
</p>
</section>
</section>
其中，形成立面的效果是如下五個陰影，距離越來越遠，顏色越來越深：
text-shadow:0.5px -1px 0 #ddd,
0.5px -1.1px 0 #dadada,
0.5px -1.2px 0 #ccc,
0.5px -1.3px 0 #cacaca,
0.5px -1.4px 0 #aaa,
而另外的陰影效果則是：
1px -1px 1px rgba(0,0,0,.1),
1px -3px 5px rgba(0,0,0,.3),
1px -5px 7px rgba(0,0,0,.2),
1px -7px 9px rgba(0,0,0,.25),
1px -9px 11px rgba(0,0,0,.2),
1px -19px 21px rgba(0,0,0,.15);
十分易于理解的 CSS 表達。
素材福利
當然考慮到一般品牌主的教師節 Digital 營銷設計計劃，本期我們提供了一組更通用的教師節素材打包提供免費下載▼
如需下載
請向公眾平臺回復關鍵字
「教師節」
獲取
通過 SVG 交互設計、低面多邊形設計、CSS 渲染，平面化的圖文有了顯著的三維效果。這種設計可以應用于大量場景設計，包括可以產生立面二維碼、立體游戲流程、立體產品展示等，也可以嘗試應用入 H5 設計中。第七期 JZ 主持的 H5 殺手訓練營（零基礎準入）即將舉辦，可以點擊下方小程序鏈接了解▼
其他你會感興趣的內容
回復 排版入門專業級新媒體排版技術
回復 廣告閱讀更多廣告營銷行業指南
回復 漫威獲取漫威片頭 AE 速成模版
回復 漢儀獲取字庫免費試用優質字體
回復 多邊形下載低面多邊形背景素材
H5、平面、視頻等數字營銷服務請致電
TEL：（021）3721 8818
合作客戶：APEC 峰會 | 中國航天科技集團 | 香奈兒 | 肯德基（湖南） | 中國國際航空 | 湖北省電視臺 | 河南衛視 | 浙江省人民廣播電臺 | 三生制藥 | 交通銀行 | 建設銀行 | 真格基金 | 南方周末 | 上海閔行教育學院 | 牛津大學出版社 | 新東方集團 | 偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 雷諾汽車 | TNS 新華信 | 高力國際｜第一太平戴維斯｜德國萊茵｜蓋茨基金會｜追星集團
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
