整合營(yíng)銷服務(wù)商

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

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

          純CSS實(shí)現(xiàn)水杯和心形兩個(gè)復(fù)雜圖標(biāo),讓你輕松實(shí)現(xiàn)自己

          純CSS實(shí)現(xiàn)水杯和心形兩個(gè)復(fù)雜圖標(biāo),讓你輕松實(shí)現(xiàn)自己的圖標(biāo)庫(kù)


          在進(jìn)行前端開發(fā)時(shí),圖標(biāo)庫(kù)的使用是一項(xiàng)必須掌握的技巧,目前流行的圖標(biāo)庫(kù)有fontawesome,iconfont等,只需要引入到項(xiàng)目中,然后使用對(duì)應(yīng)的class,就會(huì)得到對(duì)應(yīng)的圖標(biāo)。

          但是你們有沒有想過,如果是自己的話該怎么去實(shí)現(xiàn)這些圖標(biāo)呢?今天我們就來看看一些稍微復(fù)雜的圖標(biāo)是如何使用純CSS3實(shí)現(xiàn)吧。

          文中的代碼已經(jīng)放到github上了,感興趣的同學(xué)自取。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html

          CSS3

          圖標(biāo)庫(kù)

          我們可以先來看看稍微復(fù)雜的圖標(biāo)的樣子。

          圖標(biāo)庫(kù)

          從圖標(biāo)中可以看出,都是平時(shí)很常用的正確,錯(cuò)誤,方向鍵,放大,縮小,開鎖,解鎖等。

          我們從中抽取幾個(gè),慢慢分析它們是如何實(shí)現(xiàn)的吧。

          水杯

          水杯的圖標(biāo)如下所示。

          水杯圖標(biāo)

          我們對(duì)水杯圖標(biāo)進(jìn)行拆分,分為杯身和杯柄兩個(gè)部分。

          • 杯身中的白色長(zhǎng)方形就是一個(gè)div,設(shè)置寬度和高度。

          • 杯身的四周為黑色都是通過border實(shí)現(xiàn),border-bottom比其他三個(gè)放向都要大。

          • 杯身的下方是圓角,通過border-radius設(shè)置,border-radius的右下和左下方向設(shè)置相同的值。

          通過上述的分析,我們可以得到杯身部分的CSS代碼。

          杯身CSS代碼

          杯柄通過偽元素:before實(shí)現(xiàn)。

          • 杯柄設(shè)置為絕對(duì)定位,修改right值讓中間出現(xiàn)一個(gè)空白。

          • 調(diào)整杯柄位置的寬度,只需要和杯身重疊即可。

          • 杯柄右上角和右下角的border-radius設(shè)置為特定的值,展現(xiàn)成圓角的樣子。

          通過以上的分析,我們可以得到杯柄部分的CSS代碼。

          杯柄CSS代碼

          心形

          首先我們來看看心形圖案的樣子。

          心形圖案

          接下來我們同樣將整個(gè)圖案拆分來看,分成左右兩個(gè)部分,我們將上述圖案換成兩種不同顏色就一目了然了。

          拆分圖案

          從圖案中可以看出,它實(shí)際是由兩個(gè)相同的圖行旋轉(zhuǎn)不同的角度構(gòu)成,相同的元素部分,可以通過設(shè)置border-radius值來實(shí)現(xiàn)。

          我們將左右兩個(gè)半邊的形狀分別通過:before和:after來實(shí)現(xiàn),原始的的div形狀的CSS屬性則很簡(jiǎn)單,只需要設(shè)置相對(duì)位置和寬度為0即可。

          基本CSS屬性

          然后看看:before和:after共有的屬性,主要是保證為元素部分的定位為絕對(duì)定位,然后設(shè)置border-radius的值, 保證上半部分是圓角。

          共有CSS屬性

          然后是關(guān)鍵的兩半邊各自的CSS屬性。左側(cè)的圖形距左邊應(yīng)該為0,所以left: 0,右側(cè)的圖形距右側(cè)為0,所以right: 0。

          各有的CSS屬性

          同時(shí)左右兩側(cè)圖案需要進(jìn)行旋轉(zhuǎn),這里我們選擇旋轉(zhuǎn)48度,這是為什么呢?

          很多人一下子可能會(huì)想到旋轉(zhuǎn)45度,我們來看看旋轉(zhuǎn)45度時(shí)的樣子。

          旋轉(zhuǎn)45度

          從圖形中可以看出,兩側(cè)有棱角,整個(gè)圖案就顯得不標(biāo)準(zhǔn),當(dāng)旋轉(zhuǎn)超過45度時(shí),棱角的部分就會(huì)被里面的圖案遮住。

          所以這里我們選擇旋轉(zhuǎn)48度,達(dá)到最終的效果。

          最終效果圖

          結(jié)束語

          今天這篇文章我們使用純CSS3的屬性畫出了一個(gè)杯子和心形兩個(gè)稍微復(fù)雜點(diǎn)的圖案,其實(shí)其它圖案也是類似的,只要我們能將其拆分,每個(gè)部分獨(dú)立實(shí)現(xiàn),再組合就可以達(dá)到圖標(biāo)庫(kù)的效果了。

          大家也可以自己動(dòng)手實(shí)現(xiàn)一下噢~

          SS有很多方法可以創(chuàng)建心形,今天就介紹一種比較簡(jiǎn)單的方法來實(shí)現(xiàn)心形繪制,都是純CSS畫的

          畫愛心前大家應(yīng)該都會(huì)畫正方形和圓了,愛心形象主要有圓和正方形組成,先來看看概念圖

          可以看出,這里由一個(gè)旋轉(zhuǎn)后的正方形還有兩個(gè)有圓角的正方形就可以組成了

          實(shí)現(xiàn)代碼如下;

          css:

          這里利用到了樣式的偽元素:before和 :after


          主站蜘蛛池模板: 亚洲一区二区三区在线网站| 亚洲日韩一区二区一无码| 欧洲精品一区二区三区| 国产在线观看一区精品 | 麻豆国产一区二区在线观看 | 成人日韩熟女高清视频一区| 国产精品综合AV一区二区国产馆 | 国产一区二区三区免费看| 中文字幕一区视频| 国产区精品一区二区不卡中文| 亚洲AV日韩综合一区| 亚洲综合一区二区精品导航| 丰满人妻一区二区三区免费视频 | 亚洲.国产.欧美一区二区三区| 国产成人无码一区二区三区在线| 国产肥熟女视频一区二区三区| 人妻体内射精一区二区三区| 国模少妇一区二区三区| 成人午夜视频精品一区| 一区精品麻豆入口| 精品一区二区三区在线观看l| 无码人妻一区二区三区在线| 三上悠亚亚洲一区高清| 精品国产香蕉伊思人在线在线亚洲一区二区 | 亚洲综合无码一区二区| 美女视频在线一区二区三区| 久久综合精品国产一区二区三区| 冲田杏梨高清无一区二区| 国产视频福利一区| 国产一区二区三区免费视频| 精品国产一区在线观看 | 成人精品一区二区三区不卡免费看 | 在线观看中文字幕一区| 无码日韩人妻av一区免费| 国产成人综合一区精品| 亚洲Av高清一区二区三区| 精品无码一区二区三区电影| AA区一区二区三无码精片| 亚洲日韩国产欧美一区二区三区 | 亚洲AV无码一区二区三区久久精品| 91一区二区三区四区五区|