用 CSS 畫胡子

今天的代碼以Css3 為基礎(chǔ)來演示。閑話少說警检,直接畫害淤。

先創(chuàng)建一個(gè) index.html 文件窥摄,引用 style.css 樣式單,主要工作在 style.css 中完成鸽凶。定義一個(gè) div 給他類為 mustache玻侥。

CSS 想必大家都很熟吧凑兰。但可能代碼中的 currentColor 對(duì)于大家會(huì)有點(diǎn)陌生姑食,這里的 currentColor = color 音半。currentColor 的顏色值就是當(dāng)前元素的顏色值 black贡蓖。currentColor 會(huì)隨之變化。

畫圓圈

需要 CSS 中的 shadow 實(shí)現(xiàn)機(jī)制有所了解,CSS 提供 shadow 功能仅父,我們可以活用一個(gè)功能來做一些 magic 的事 笙纤。大家有時(shí)間可以下功夫好好研究一下省容。功能強(qiáng)大腥椒,這里給 shadow 的模糊和擴(kuò)散給 0候衍,之所以給 0 就是讓 shadow 邊緣尖銳蛉鹿,看效果。

我們這里需要給元素一個(gè)絕對(duì)位置领追,然后給 shadow 一個(gè)較大的偏移量绒窑,這樣 shadow 就脫離真身些膨,成為真身的替身分歇。

再畫一個(gè)圓职抡,同一元素支持多個(gè) shadow 缚甩。我們就再來繪制一個(gè) shadow 給這個(gè) shadow 不同于前一個(gè)的偏移量。

我都看兩個(gè) shadow, 然后可以隱藏 div 真身 ,只留下他的 shadow李请,在拿出來 border 這里利器导盅,這都是 css 的秘密武器白翻。還有就是 before 和 after 這兩個(gè)偽元素绢片,也是經(jīng)常用到的CSS 功能底循。

每個(gè)圖形都有通過 before 來繪制出一個(gè)元素此叠,我們給他的內(nèi)容為空 content ,然后給一個(gè)大大的底邊。

最后用一些radius 做一些 magic 的事窗看,我想最初設(shè)計(jì) CSS 人倦炒,也沒想到開發(fā)人員今天把他玩如此的心應(yīng)手逢唤,做出如此 magic 的事。

通過給背景一個(gè)顏色魔慷,以便觀察胡子個(gè)個(gè)部分之間的關(guān)系院尔。

圓角也會(huì)影響到邊框,這是本次分享的難點(diǎn)栋盹,希望大家能理解例获,如果不理解可以自己寫幾個(gè)小例子來體會(huì)一下曹仗。

我們?nèi)サ糁氨阌谟^察的紅色部分整葡。

現(xiàn)在形狀基本與我們預(yù)期的效果已經(jīng)很接近了,但是他位置還不對(duì)旬渠,我需要通過旋轉(zhuǎn)的中心來調(diào)整胡子位置告丢。


調(diào)整旋轉(zhuǎn)的圓心照捡,根據(jù)新的坐標(biāo)點(diǎn)旋轉(zhuǎn)就得到我們想要結(jié)果话侧。

剩下半邊大家可以嘗試自己根據(jù)上面的提示畫一下悲立。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末薪夕,一起剝皮案震驚了整個(gè)濱河市原献,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嚼贡,老刑警劉巖粤策,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叮盘,死亡現(xiàn)場(chǎng)離奇詭異柔吼,居然都是意外死亡愈魏,警方通過查閱死者的電腦和手機(jī)培漏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門牌柄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侧甫,“玉大人,你說我怎么就攤上這事咒锻±淙撸” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵虫碉,是天一觀的道長贾惦。 經(jīng)常有香客問我,道長敦捧,這世上最難降的妖魔是什么须板? 我笑而不...
    開封第一講書人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮兢卵,結(jié)果婚禮上习瑰,老公的妹妹穿的比我還像新娘。我一直安慰自己秽荤,他們只是感情好甜奄,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蜒茄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屿聋,一...
    開封第一講書人閱讀 49,792評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音勒魔,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播竖配,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼胁镐,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼宠能!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤鄙漏,失蹤者是張志新(化名)和其女友劉穎巩步,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鲸湃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年垃它,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惯殊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冲甘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出律适,到底是詐尸還是另有隱情胳嘲,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滚朵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一糠悼、第九天 我趴在偏房一處隱蔽的房頂上張望班缰。 院中可真熱鬧,春花似錦、人聲如沸疯趟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至砰粹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乾忱,已是汗流浹背氏义。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留图云,地道東北人琼稻。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親泉蝌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子勋陪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color过咬,font敞映,text-align萍歉,li...
    wzhiq896閱讀 1,732評(píng)論 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)档桃。 注意:講述HT...
    kismetajun閱讀 27,449評(píng)論 1 45
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color枪孩,font,text-align藻肄,li...
    love2013閱讀 2,304評(píng)論 0 11
  • 用力去愛蔑舞,體面地離開。 如今娛樂圈出軌的丑聞嘹屯,已經(jīng)多到吃瓜群眾都不愛看的家常便飯了攻询。今天爆出何潔離婚的新聞,本身無...
    愛晚睡閱讀 2,762評(píng)論 16 23