整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          簡單解釋一下:

          1. perspective 可以作用于元素的后代,設(shè)置在最上層即可;
          2. 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

          合作客戶:APEC 峰會 | 中國航天科技集團(tuán) | 香奈兒 | 肯德基(湖南) | 中國國際航空 | 湖北省電視臺 | 河南衛(wèi)視 | 浙江省人民廣播電臺 | 三生制藥 | 交通銀行 | 建設(shè)銀行 | 真格基金 | 南方周末 | 上海閔行教育學(xué)院 | 牛津大學(xué)出版社 | 新東方集團(tuán) | 偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 雷諾汽車 | TNS 新華信 | 高力國際|第一太平戴維斯|德國萊茵|蓋茨基金會|追星集團(tuán)


          主站蜘蛛池模板: 国产伦精品一区二区三区在线观看| 亚洲AⅤ无码一区二区三区在线| 国偷自产一区二区免费视频| 欧洲亚洲综合一区二区三区| 老熟妇仑乱视频一区二区| 亚洲第一区精品观看| 一区在线观看视频| 精品国产毛片一区二区无码| 亚洲国产精品第一区二区三区| 精品乱码一区二区三区在线| 精品视频午夜一区二区| 天堂不卡一区二区视频在线观看| 国产一区二区三区无码免费| 成人丝袜激情一区二区| 精品国产日韩亚洲一区在线| 成人精品一区二区三区校园激情| 精品国产一区二区三区AV| 国产精品99精品一区二区三区| 成人一区专区在线观看| 国产精品一区二区无线| 一区二区三区免费视频播放器| 久久久人妻精品无码一区| 中文字幕在线观看一区二区| 国产在线精品一区二区不卡| 久久精品免费一区二区三区| 精品三级AV无码一区| 亚洲AV成人一区二区三区观看| 亚洲AV网一区二区三区| 日本一区二区在线不卡| 国产亚洲一区二区手机在线观看| 亚洲AV成人一区二区三区AV| 成人免费观看一区二区| 国产精品成人一区二区三区| 超清无码一区二区三区| 国产精品伦一区二区三级视频| 日韩精品无码一区二区视频| 色婷婷一区二区三区四区成人网 | 国产美女精品一区二区三区| 日韩精品区一区二区三VR| 亚洲av永久无码一区二区三区| 北岛玲在线一区二区|