經(jīng)常我們在開發(fā)的時(shí)候名扛，我們會(huì)經(jīng)常遇到這樣的小icon的切圖，當(dāng)然通常我們的做法都是直接找ui去要切圖茧痒。最近在開發(fā)自己的項(xiàng)目的時(shí)候肮韧，才突然發(fā)現(xiàn)到 其實(shí)很多簡單的視圖都可以用原生css語言來完成。這里我就簡單的給大家介紹幾個(gè) 當(dāng)作敲門磚用吧旺订。
一弄企、 聊天氣泡三角形的實(shí)現(xiàn)
1、
新建一個(gè)div
<div class="__arrow"></div>
2区拳、
給氣泡設(shè)置初始屬性
.__arrow{
display:inline-block;
padding:10px;
background:blue;
color:#FFF;
border-radius:8px;
min-width: 50px;
line-height: 24px;
height: 24px;
position:relative;
}
3拘领、
用偽類before設(shè)置收到的消息
.__arrow:before{
display:block;
content:'';
border-width:8px 8px 8px 8px;
border-style:solid;
border-color: transparent #ff4d4d transparent transparent;
position:absolute;
left:-16px;
top:20%;
}
3、
用偽類after設(shè)置我的消息
.__arrow:after{
display:block;
content:'';
border-width:8px 8px 8px 8px;
border-style:solid;
border-color: transparent transparent transparent #ff4d4d;
position:absolute;
left:100%;
top:20%;
}
二樱调、 加號
上圖就是我想要的加號效果约素。
step1、
新建一個(gè)div
<div class="__plus"></div>
step2笆凌、
寫div寫一個(gè)基礎(chǔ)樣式咯,首先先寫一個(gè)邊框
.__plus{
width: 100px;
height: 100px;
color: black;
transition: color .25s;
position: relative;
border: 1px solid
}
step3圣猎、
然后利用偽類before來寫一個(gè)橫：
.__plus::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 100px;
margin-left: -50px;
margin-top: -5px;
border-top: 10px solid;
}
step3、
同樣乞而，最后用偽類after來寫一個(gè)豎：
.__plus::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 100px;
margin-left: -5px;
margin-top: -50px;
border-left: 10px solid;
}
這樣一個(gè)簡單的視圖就完成了送悔，這主要是通過那啥偽類來完成的這里有這么一種情況啊：就是是不是意味著每次我新建一個(gè)不同大小的視圖就要重新寫一遍呢？
回答當(dāng)然不是的放祟。（我是最討厭寫重復(fù)代碼的人）鳍怨，我這里就用stylus做了一個(gè)簡單的封裝，具體的代碼如下：
/**
$size：視圖的長度
$plusWidth：加號的寬度
$color：加號的顏色
*/
plus_icon($size, $plusWidth = 2px, $color = #fff)
width: $size;
height: $size;
color: $color;
transition: color .25s;
position: relative;
&::after
content: '';
position: absolute;
left: 50%;
top: 50%;
height: $size;
margin-left: -($plusWidth/ 2);
margin-top: -(0.5 *$size);
border-left: $plusWidth solid;
&::before
content: '';
position: absolute;
left: 50%;
top: 50%;
width: $size;
margin-left: -(0.5 *$size);
margin-top: -($plusWidth/ 2);
border-top: $plusWidth solid;
最后在使用的時(shí)候跪妥，直接簡單的：
.add
plus_icon(12px, 4px)
就能看到效果了
三鞋喇、 齒輪
關(guān)于齒輪呢？我會(huì)用到box-shadow,不清楚的小伙伴可以去看看眉撵。然后進(jìn)入繪畫流程
第一步侦香、 畫出同心圓
.__gear {
width: 200px;
height: 200px;
box-shadow: 0 0 0 50px black inset, 0px 0px 0px 50px white inset;
margin: 200px auto;
position: relative;
border-radius: 50%;
}
第二步、利用偽類before畫出部分齒輪
.__gear::before {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
border-radius: 5px;
box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
}
第三步纽疟、利用偽類after畫出剩余部分齒輪
代碼如下：
.__gear::after {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
border-radius: 5px;
box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
transform-origin: 100px 100px;
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
同理罐韩，我也做了一個(gè)比較通用的方法，也是用stylus寫的,代碼如下：
gear_icon_common($size, $cicle_size, $tri_size)
$_size01 = (($size/ 2) - ($tri_size/ 2))
$_size02 = (-0.8 *$tri_size)
$_size03 = ($size - ($tri_size/ 5))
content: "";
display: block;
width: $tri_size;
height: $tri_size;
position: absolute;
border-radius: $tri_size / 5;
box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
-webkit-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
-moz-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
/**
$size:整個(gè)視圖的寬度
$cicle_size: 環(huán)的寬度
$tri_size: 齒輪的寬度
$Hcolor:環(huán)/齒輪的顏色
$Icolor:內(nèi)圓的顏色
*/
gear_icon($size, $cicle_size, $tri_size, $Hcolor = #000, $Icolor = #fff)
width: $size;
height: $size;
box-shadow: 0 0 0 $cicle_size $Hcolor inset, 0px 0px 0px $cicle_size $Icolor inset;
margin: $size auto;
position: relative;
border-radius: 50%;
&::after
gear_icon_common($size, $cicle_size, $tri_size)
&::before
gear_icon_common($size, $cicle_size, $tri_size)
transform-origin: ($size/ 2) ($size/ 2)
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
在使用的時(shí)候就直接使用：
.__artical_content_setting
gear_icon(14px, 4px, 3px)
寫在最后
最近我發(fā)現(xiàn)我發(fā)表在簡書的文章有很多人評論污朽，首先我很開心能被大家看到散吵，其次我簡單說明一下：
簡書上面很多的技術(shù)類文章呢？我都是當(dāng)作讀書筆記來做的蟆肆，很多用詞用句不是很嚴(yán)謹(jǐn)矾睦，基本都是用到了，覺得不錯(cuò)就寫下來了炎功。
其次就是最近買了一個(gè)服務(wù)器枚冗，想自己獨(dú)立搭建一個(gè)包含后臺(tái)、前端蛇损、android端赁温、小程序端和微信公眾號多端通用的一個(gè)寫作平臺(tái)。因?yàn)樵撇渴鹩倨搿⒑笈_(tái)的知識(shí)鏈比較的薄弱股囊，加上還要定時(shí)去各大媒體投遞一些非技術(shù)類的文章。關(guān)于本站的技術(shù)類文章呢更啄？就不會(huì)定時(shí)的更新稚疹，但還是會(huì)寫一點(diǎn)在開發(fā)中遇到的一些有趣的東西。
最后想說點(diǎn)心里話锈死，因?yàn)楝F(xiàn)在工作也不是很輕松贫堰，外加上自己的技術(shù)內(nèi)涵比較薄弱穆壕，一般主流的時(shí)間和精力都會(huì)用在工作待牵、學(xué)習(xí)和完善自己的想法上面，可能在某些用詞用句上面沒做很大的斟酌喇勋，希望大家海涵（主要也很討厭那些裝逼的人缨该，說一些不太好的裝逼的話 有點(diǎn)惡心）。至于有人私聊我 關(guān)于沒看懂或者描述不清楚的地方呢川背？我很樂意的去為您解決問題贰拿，但是我呢蛤袒，不會(huì)有太多的時(shí)間去看這個(gè)簡書的 我建議是加本人的微信來深入交流，當(dāng)然這段時(shí)間過了之后 我還是會(huì)花大精力在運(yùn)營上面的膨更。
