近大家刷抖音,是否有刷到拉斯維加斯的新地標(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 立方體,相對另外一個文字和顏色都在隨機(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;
}
簡單解釋一下:
接下來,就是最為核心的,如何設(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 個面的立方體元素。
示意效果如下:
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)立體效果就不難了。我們嘗試將兩者結(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)
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。