CSS 還原拉斯維加斯球數(shù)字動畫

近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」：

場館內(nèi)部的視覺效果非常驚人，其中一個效果讓我虎軀一震：

我的第一想法就是，這個看起來用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？

本文，就將嘗試使用 CSS，大致還原這個效果。

拆解動畫效果

其實(shí)，上述的動畫效果，本質(zhì)就是一個 3D 立方體。

同時，3D 立方體上每個面存在顏色不一樣的文字，文字和顏色都在隨機(jī)變化。

也就是說，我們需要實(shí)現(xiàn)一個 3D 立方體：

同時，我們還需要實(shí)現(xiàn)這樣一個動畫效果 -- 文字和顏色都在隨機(jī)變化的平面效果：

兩者組合一下，再挪動 3D 元素的景深距離，就能實(shí)現(xiàn)我們想要的效果！

好，下面我們一個一個實(shí)現(xiàn)。

實(shí)現(xiàn)一個 3D 立方體

實(shí)現(xiàn)一個 3D 立方體，相對另外一個文字和顏色都在隨機(jī)變化的平面效果而言，屬于非常非常簡單的一步了。

我們在非常多篇文章中也講過具體的實(shí)現(xiàn)方式：

最常見的 3D 圖形，莫過于一個 3D 立方體。

如果沒有上下兩個面，只是一個 4 個面的圖形，大概是這樣：

這樣一個圖形，利用 CSS 3D，如何快速實(shí)現(xiàn)呢？

首先，構(gòu)造這么一個結(jié)構(gòu)：

<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 個面，就是最內(nèi)層的 4 個 .img，首先，需要給兩個父容器，設(shè)置 3D 的屬性：

.perspective {
  perspective: 3000px;
}
.container {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
}

簡單解釋一下：

perspective 可以作用于元素的后代，設(shè)置在最上層即可；
transform-style: preserve-3d 設(shè)置給最終需要 3D 空間的元素的父容器之上，由于最終是 4 個 .img 需要 3D 空間，因此設(shè)置給 .container 即可。

接下來，就是最為核心的，如何設(shè)置 4 個 .img 元素的 3D 變換，使之形成 3D 立方體。

技巧就是：先旋轉(zhuǎn)，再位移。

這里給出一個俯視效果圖：

以上述 Demo 中的正方體為例子，class 為 .img 的 div 塊的高寬為 400px*400px。那么要利用 4 個這樣的 div 拼接成一個正方體，需要分別將 4 個 div 繞 Y 軸旋轉(zhuǎn) [90°, 180°, 270°, 360°]，再 translateY(200px) 。

值得注意的是，一定是先旋轉(zhuǎn)角度，再偏移距離，這個順序很重要。

代碼如下：

.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 設(shè)置一個恰當(dāng)?shù)?translateZ 進(jìn)行視覺大小上的調(diào)節(jié)。

.container {
    transform: translateZ(-3000px);
}

這樣，就能得到恰當(dāng)大小的立方體元素效果：

當(dāng)然，對于我們這個效果，我們 5 要五個面（前后左右與上方即可），因此，我們基于上述的基礎(chǔ)知識鋪墊，重新實(shí)現(xiàn)一個我們需要的框架結(jié)構(gòu)：

<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 個面的立方體元素。

示意效果如下：

實(shí)現(xiàn)文字動畫效果

OK，立方體我們先放在一邊。

接下來，我們嘗試來實(shí)現(xiàn)這個效果：

這個效果如果一個文字用一個 DIV 承載實(shí)現(xiàn)，那是非常容易的，但是這樣勢必會造成元素過多，再設(shè)置動畫效果，則會導(dǎo)致頁面太為卡頓。

所以，我們需要另辟蹊徑。這里，我們可以使用多層漸變配合 background-clip: text。

首先，我們利用等寬字體，隨機(jī)實(shí)現(xiàn)一列文字：

<div>ABCDEFGHIJKLMN</div>

div {
    font-family: monospace;
    text-align: center;
    font-size: 25px;
    width: 25px;
    line-height: 25px;
    color: #fff;
}

效果大致如下：

此時，如果我們再利用線性漸變，給每個字符的對應(yīng)空間（也就 25px x 25px），設(shè)置上不同的顏色，大概是這樣：

@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 函數(shù)，參數(shù) 14 表示生成 14 層線性漸變，每一個文字區(qū)域的顏色都是隨機(jī)的，經(jīng)過編譯后的其中一種結(jié)果如下：

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 的高度，利用線性漸變隨機(jī)設(shè)置了一種顏色，最終，能夠得到這么個效果：

此時，我們只需要再設(shè)置 background-clip: text，配合透明文字顏色 color: transparent，就可以實(shí)現(xiàn)單個 div 內(nèi)，單列文字，每個字體的顏色都是不一樣的：

div {
    // ...
    background: randomLinear(14);
    background-clip: text;
    color: transparent;
}

此時，效果如下：

當(dāng)然，文字顏色可以隨機(jī)，那么文字本身也應(yīng)該隨機(jī)。這個不難，我們也可以借助 SASS 函數(shù)，編寫一個隨機(jī)字符的函數(shù)，通過元素的偽元素 content 進(jìn)行設(shè)置。

那么此時，完整的代碼可能是這樣的：

<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 內(nèi)的文字，都是從上面 SASS 函數(shù)中 $str 變量中隨機(jī)取的：

接下來，我們需要實(shí)現(xiàn)文字的隨機(jī)跳變，也很好做，我們需要在一開始，隨機(jī)生成多個不同的 content，然后，借助 CSS 動畫，進(jìn)行切換。

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，進(jìn)行字符內(nèi)容的替換，此時，整個效果如下：

隨機(jī)內(nèi)容有了，單個字體顏色不一樣有了，就差顏色的隨機(jī)跳變動畫了，這個也非常好做，我們在多篇文章也提及過，利用 filter: hue-rotate() 可以快速實(shí)現(xiàn)內(nèi)容的顏色切換。

div {
    animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

我們利用了 filter: hue-rotate() 加上了步驟動畫（steps），成功的實(shí)現(xiàn)了顏色的跳變！效果如下：

當(dāng)然，我們最終要實(shí)現(xiàn)的是整個面隨機(jī)顏色加上隨機(jī)文字的跳變動畫，只需要在上述的基礎(chǔ)上，利用 SASS 函數(shù)，循環(huán)重復(fù)多列操作即可。基于上述所有內(nèi)容的鋪墊，我們最終的單個面下的動畫效果代碼如下：

<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);
    }
}

這樣，我們就成功的實(shí)現(xiàn)了單個平面下的，顏色隨機(jī)，文字隨機(jī)，且不斷變化的動畫效果：

實(shí)現(xiàn)立體效果

有了上面的立方體和單個平面的效果，要實(shí)現(xiàn)立體效果就不難了。我們嘗試將兩者結(jié)合起來。

改造原有的立方體結(jié)構(gòu)，大致改成如下形式：

.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>

這里，我們只需要實(shí)現(xiàn) 5 個面的立方體即可（前后左右以及上方）。

每個 .g-panel，實(shí)現(xiàn)一個我們上面鋪墊的單面文字跳變效果，這樣，我們就能得到這么一個立體的 3D 立方體動畫效果：

接下來，我們只需要稍加調(diào)試，通過控制 perspective 和 transform: translateZ() 控制視覺上的縱深，將畫面的視角放置于整個立方體之中，即可得到這么個效果：

好，最后，我們模擬文章開頭拉斯維加斯球的效果，讓頂部的平面，向下運(yùn)動，實(shí)現(xiàn)一種天花板往下掉的動畫效果，最終，我們即可使用純 CSS，大致模擬出整個效果：

由于 GIF 錄制問題，實(shí)際效果會比 GIF 展示效果更為震撼。

話說：工欲善其事，必先利其器！對于繪制幾個圖形也是如此，選擇一個好的繪圖軟件將會令你事半功倍，快速繪制出各種各樣的幾何圖形。為了方便大家的使用，小編在這里收錄了各類專業(yè)幾何圖像設(shè)計工具，不僅僅可以輔助你的工作學(xué)習(xí)，還可以方便你制作各類數(shù)學(xué)幾何圖形類課件來方便教學(xué)。

一、幾何畫板

幾何畫板是由美國Key Curriculum Press公司制作并出版的優(yōu)秀教育軟件，1996年該公司授權(quán)人民教育出版社在中國發(fā)行該軟件的中文版。它是一個通用的數(shù)學(xué)、物理教學(xué)環(huán)境，提供豐富而方便的創(chuàng)造功能使用戶可以隨心所欲地編寫出自己需要的教學(xué)課件。其功能非常強(qiáng)大，可以說是最出色的教學(xué)軟件之一，軟件獲取地址參考：http://www.jihehuaban.com.cn/xiazai.html。

正如其名“21世紀(jì)動態(tài)幾何”，它能夠動態(tài)地展現(xiàn)出幾何對象的位置關(guān)系、運(yùn)行變化規(guī)律，是數(shù)學(xué)與物理教師制作課件的“利劍”！該軟件界面簡潔，易于操作，由題標(biāo)欄、菜單欄、工具欄、狀態(tài)欄、繪圖窗口和記錄窗口等組成。工具欄依次是選擇工具（實(shí)現(xiàn)選擇，及對象的平移、旋轉(zhuǎn)、縮放功能）、畫點(diǎn)工具、畫線工具、畫圓工具、文本工具和對象信息工具。在選擇工具和畫線工具按鈕上按住鼠標(biāo)左鍵停留片刻，會彈出更多的類型工具；選擇對象的方法可以選擇點(diǎn)按、按Shift點(diǎn)按或拖動等方式選中對象。

二、幾何圖形計算軟件

幾何圖形計算軟件是一款面建筑工程常用幾何圖形計算軟件，可以快速計算出幾何圖形的體積、表面積以及側(cè)表面積，支持長方體、交叉圓柱體、棱臺、棱錐、球、球帶體、球缺等幾何圖形的計算，并且使用非常簡單，只需輸入相關(guān)數(shù)據(jù)即可以及給出結(jié)果，方便實(shí)用。

三、Z+Z智能教育平臺

Z+Z智能教育平臺是為我國基礎(chǔ)數(shù)學(xué)教育量身定做的數(shù)學(xué)教育軟件，是知識性和智能型相結(jié)合的、多功能的教育工具平臺，包括超級畫板、立體幾何、網(wǎng)絡(luò)畫板等軟件。適合于中學(xué)數(shù)學(xué)、物理教師進(jìn)行課件制作、課堂演示以及課題研究的工具平臺，也是一套適合于學(xué)生開展動手實(shí)踐、自主探索、合作交流的學(xué)科實(shí)驗(yàn)室。

四、PhysicsEditor (box2d形狀編輯器)

PhysicsEditor是一款box2d形狀生成器，只需點(diǎn)點(diǎn)鼠標(biāo)即可生成plist圖形文件，還有很有特色的魔術(shù)棒工具，可自動完成標(biāo)記定點(diǎn)和分隔polygon的過程。。該工具屬于物理屬性的編輯器，相當(dāng)純凈，附帶的Helper文件，可以且僅僅幫我管理shape和物理屬性，不負(fù)責(zé)bodydef, fixturedef的代碼，這可以讓設(shè)計更加靈活隨意。它最強(qiáng)的地方在于魔術(shù)棒工具，上面那個杯子的shape頂點(diǎn)，只需要點(diǎn)一下魔術(shù)棒就自動完成了標(biāo)記頂點(diǎn)和分隔polygon的過程。

五、幾何表達(dá)式

幾何表達(dá)式是一款世界領(lǐng)先的交互式符號幾何系統(tǒng)。幾何圖形可以按符號約束或者數(shù)字領(lǐng)域進(jìn)行定義。繪圖上的測量與計算不再是唯一的單純的近似數(shù)字了(世界上大多數(shù)乃至幾乎全部的軟件對于度量與計算都是這樣的)，它可以是精確的明確符號或公式，相當(dāng)于數(shù)學(xué)式子的推導(dǎo)。通過參數(shù)、符號來定義軌跡可以為您的繪圖帶來強(qiáng)大的生命力。

幾何表達(dá)式可以作為一個單獨(dú)程序使用，或者通過 MathML 輸入和輸出，與您所喜愛的數(shù)學(xué)系統(tǒng)配合使用，當(dāng)然還可以把幾何表達(dá)式作為您的代數(shù)系統(tǒng)的平面幾何軟件，或者考慮把該軟件作為幾何系統(tǒng)的代數(shù)擴(kuò)展，也可考慮把該軟件作為數(shù)學(xué)方面互不干預(yù)的獨(dú)立系統(tǒng)。

以上就是當(dāng)下比較流行的幾款幾何圖形繪圖軟件，每個軟件的優(yōu)點(diǎn)不同，使用的側(cè)重點(diǎn)也不一樣，大家在使用的時候可以自行選擇，希望以上整理對大家有幫助。

文立體排版由純代碼構(gòu)建

內(nèi)容為教師節(jié)主題排版設(shè)計

文末有教師節(jié)設(shè)計素材福利

想學(xué)更多 H5 硬技術(shù)？點(diǎn)擊報名▼

點(diǎn)

擊

太

陽

兩

次

↓

您

是賦

輕我

風(fēng)槳

，葉

以

力

量

。

土我

壤枝

，芽

以

滋

養(yǎng)

。

祝

福教

您師

，節(jié)

快

樂

！

絕大多數(shù)新媒體排版，只在二維平面上展開視覺體。本期，我們?yōu)楦魑黄放浦鹘榻B兩種讓畫面更呼之欲出的三維立體排版法。

低面多邊形設(shè)計

普通的圖片之所以不立體，是因?yàn)椋?/p>

畫質(zhì)被微信壓縮，立體保真度降低；
用戶無法與圖像互動，無法觸手可得；

若要圖像完全無損，我們很容易想到采用 JZ 和微信團(tuán)隊(duì)共同推出的 SVG 高級解決方案。但是 JZ 曾在《SVG 交互式圖文的系統(tǒng)適配與優(yōu)化問題》提醒過讀者們，SVG 在微信圖文內(nèi)并不支持漸變。

而「漸變」似乎又是立體內(nèi)容的標(biāo)配之一：因?yàn)樵诠庹珍秩局拢矬w必然有大量漸變的效果存在。

有沒有折衷的辦法？如果你是設(shè)計師出身，或許就會想到 LOW POLY 設(shè)計（低面多邊形）。由于這種三維表現(xiàn)手法中，一切事物都又多個連續(xù)平面（四邊形或三角形）組合而成，所以單個平面上的光照分布基本均勻，可以不存在漸變關(guān)系，但整體上依舊提供了超強(qiáng)的立體感官。

以下為部分低面多邊形設(shè)計范例▼

立體感十足吧？而且制作這類圖像的方式并不算太難，如果你熟悉 C4D（Cinema 4D）的話，可以現(xiàn)在軟件內(nèi)構(gòu)造好模型。

接下來，第一種方式是在「TAGS」中生成模型的素描材質(zhì)球▼

并且將對線條的設(shè)置，調(diào)整為「邊沿」而不是「邊緣」▼

當(dāng)然如果你想利用其表面填充也無妨，隨后在 C4D 中導(dǎo)出為 AI，并獲得如下結(jié)構(gòu)。并基于你的設(shè)計能力進(jìn)行逐步的色彩還原▼

當(dāng)然，對于結(jié)構(gòu)簡單的模型，我們也可以偷個懶，直接從 C4D 烘焙出一張位圖效果，隨后通過 AI 的描摹形成矢量稿，最終通過 SVG 代碼的方式注入圖文中。

當(dāng)然更重要的是，要給低面多邊形設(shè)計內(nèi)容預(yù)留交互內(nèi)容。比如在本文的示范中，小風(fēng)車通過點(diǎn)擊太陽可以開始轉(zhuǎn)動，就讓用戶有了觸手可得的體驗(yàn)。

CSS 文本立體設(shè)計

我們要介紹的第二種三維立體微信圖文排版則和文字有關(guān)，這個設(shè)計相對來說也更廣為人知一些。

文字（可選中的 TEXT 形態(tài)）立體設(shè)計有如下要點(diǎn)：通過<text-shadow>連續(xù)疊加形成文字“厚度”；通過<text-shadow>連續(xù)柔化形成文字“陰影”；如果需要產(chǎn)生視角傾斜的話，通過<transform:skew>視情況變形；

如果手動調(diào)這些參數(shù)，有時候效率比較低，這里推薦一個可視化調(diào)控工具▼

http://tools.jb51.net/aideddesign/css3_textshadow

因而一個常規(guī)的文本陰影通常按如下方式書寫。三位數(shù)分別表示水平偏移、垂直偏移、和模糊半徑：

text-shadow:1px -1px 0px #333333;

而設(shè)計立面文字，其實(shí)并沒有真的使文字立體，而是通過給文字連續(xù)排列多重?zé)o模糊陰影，而在視覺上形成立體（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>

其中，形成立面的效果是如下五個陰影，距離越來越遠(yuǎn)，顏色越來越深：

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 表達(dá)。

素材福利

當(dāng)然考慮到一般品牌主的教師節(jié) Digital 營銷設(shè)計計劃，本期我們提供了一組更通用的教師節(jié)素材打包提供免費(fèi)下載▼

如需下載

請向公眾平臺回復(fù)關(guān)鍵字

「教師節(jié)」

獲取

通過 SVG 交互設(shè)計、低面多邊形設(shè)計、CSS 渲染，平面化的圖文有了顯著的三維效果。這種設(shè)計可以應(yīng)用于大量場景設(shè)計，包括可以產(chǎn)生立面二維碼、立體游戲流程、立體產(chǎn)品展示等，也可以嘗試應(yīng)用入 H5 設(shè)計中。第七期 JZ 主持的 H5 殺手訓(xùn)練營（零基礎(chǔ)準(zhǔn)入）即將舉辦，可以點(diǎn)擊下方小程序鏈接了解▼

其他你會感興趣的內(nèi)容

回復(fù) 排版入門專業(yè)級新媒體排版技術(shù)

回復(fù) 廣告閱讀更多廣告營銷行業(yè)指南

回復(fù) 漫威獲取漫威片頭 AE 速成模版

回復(fù) 漢儀獲取字庫免費(fèi)試用優(yōu)質(zhì)字體

回復(fù) 多邊形下載低面多邊形背景素材

H5、平面、視頻等數(shù)字營銷服務(wù)請致電

TEL：（021）3721 8818

在線咨詢

上一篇：JavaScript實(shí)現(xiàn)的多功能側(cè)邊導(dǎo)航菜單源碼
下一篇：HTML 布局