前端技巧：用css畫一個QQ瀏覽器圖標

次畫的是QQ瀏覽器圖標，比較復雜，各種高光漸變色內陰影等。其實，CSS畫畫就和用PS畫畫一樣，從最底層，一層一層往上畫，最后合成一張圖：

CSS畫QQ瀏覽器圖標

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

html,body{
 height:100%;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eee;
}

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

.logo{
 width: 300px;
 height:300px;
 background: linear-gradient(to right bottom,#66adff,#1a6adb);
 border-radius: 999px;
 position: relative;
}
<div class="logo"></div>

效果圖：

3、給 logo 的 after 上個灰色，做出鏤空效果：

.logo:after{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background-color: #eee;
 border-radius: 999px;
 z-index: 15;
 left: 50%;
 top:50%;
 margin-left: -75px;
 margin-top:-75px;
}

效果圖：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

.logo:before{
 position: absolute;
 width: 166px;
 height: 166px;
 content:'';
 background: linear-gradient(to right bottom,#1a6adb,#66adff);
 border-radius: 999px;
 z-index: 9;
 left: 50%;
 top:50%;
 margin-left: -83px;
 margin-top:-83px;
}

效果圖：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

.before-high-light{
 position: absolute;
 width: 168px;
 height: 168px;
 content:'';
 background: linear-gradient(to right bottom,#96d9ff,#5cafff,#96d9ff);
 border-radius: 999px;
 z-index: 8;
 left: 50%;
 top:50%;
 margin-left: -84px;
 margin-top:-84px;
}
<div class="logo">
 <div class="before-high-light"></div>
</div>

效果圖：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

.left-top-high-light{
 position: absolute;
 width: 298px;
 height: 298px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 50%);
 border-radius: 999px;
 z-index: 7;
 left: 50%;
 top:50%;
 margin-left: -149px;
 margin-top:-149px;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
</div>

效果圖：

7、畫云，一共三朵，放在右下角，白色背景，利用內陰影，給云上色(放在chrome調整，這塊比較麻煩，需要細細調)，由于css容器樣式的局限性，不能讓云成為一個整體，建議這類可以考慮用svg或者canvas實現，我這里還是用div來實現：

.clouds{
 position: absolute;
 width: 90px;
 height: 90px;
 background-color: #fff;
 border-radius: 999px;
 z-index: 16;
 bottom: 20px;
 right:60px;
 box-shadow: -3px 15px 12px 0 rgba(42,127,236,.3) inset;
}
.clouds:before{
 content:'';
 position: absolute;
 width: 100px;
 height: 70px;
 background-color: #fff;
 border-radius: 999px;
 bottom: -20px;
 left:-30px;
 box-shadow: 5px -5px 8px 0 rgba(42,127,236,.3) inset;
}
.clouds:after{
 content:'';
 position: absolute;
 width: 123px;
 height: 60px;
 background-color: #fff;
 border-radius: 0 999px 999px 0;
 bottom: -20px;
 right:-30px;
 box-shadow: -16px -9px 11px 0 rgba(42,127,236,.3) inset;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
</div>

效果圖：

8、左下角，云之下的高光，這個高光容器，寬高為 logo 的一半，左下角為全圓角，其他三個角可以不設置圓角，z-index 置于前面所有內容的下面，logo 的上面，背景為從左上到右下，從無到有的白色漸變，如果覺得太生硬，可以稍微給點羽化：

.left-bottom-high-light{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 70%);
 border-radius:0 0 0 999px;
 z-index: 14;
 left:0;
 bottom:0;
 filter: blur(1px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
</div>

效果圖：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

.shadow{
 position: absolute;
 width:200px;
 height:10px;
 content:'';
 background:#666;
 border-radius:50%;
 z-index: 1;
 left: 50%;
 bottom:-3px;
 margin-left: -100px;
 filter: blur(4px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
</div>

效果圖：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

.high-light{

position: absolute;

width:100px;

height:20px;

content:'';

background:rgba(255,255,255,.9);

border-radius:50%;

z-index: 15;

left: -8px;

top: 33px;

filter: blur(4px);

transform: rotate(-45deg);

}

</div>

最終效果圖：

創文章請勿轉載

上一次教給大家使用倒敘代碼實現 “小編撤回了一條消息并親了你的小臉”（訂閱我查看往期）
可能小編第一次教大家，語言有些混亂導致很多人沒有看懂。
后來小編建了群在里面發了視頻，有興趣的可以通過往期文章查看

廢話不多說，這一次的比較簡單，先給大家看一看效果：

限制ZZ可見的說說，這樣發會被打的...謹慎使用。

騙超贊專用的說說

也可以在他人的評論中使用

其實這一次的代碼非常簡單，就是利用QQ空間本身自帶的表情圖標
這些圖標不能直接打出來，而是被賦予了一個編號

例如我們剛才使用的打賞的圖標的代碼就是：

[em]e10033[/em]

其中我們來看一下 10033 是表情的代碼，33號表示打賞的圖標。

這一個號碼可以任意替換以達到不同的效果，如下圖：

使用方法，看上圖中的圖標（豎著看,分三排）
第一個圖標的代碼是：[em]e10001[/em]
第二個是搜集的圖標： [em]e10002[/em]
第三個是Ipad的圖標： [em]e10003[/em]
第十一個是一朵花的圖標： [em]e10011[/em]

接下來，跟大家說一下圖中，發表的說說的時候文字如何變成其他顏色：

{uin:1000,nick:點擊領取紅包}

其實這是一個連接，點擊后會打開QQ號為1000的人的空間

效果就是：

好啦，大家可以隨意發揮自己的想象力啦

什么Iphone7 Iphone8在線都不在話下

小編已經迫不及待地想要看看大家有什么好的創意了！記得在回復中告訴小編哦

記得關注小編哦~

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

經常能夠看到一些用CSS3繪制的精致圖形，它們通常由矩形，圓形，橢圓，三角形,梯形等組合而成。要想繪制我們自己的圖形，就要先了解下基本圖形的繪制方法了。

一個display：block的元素設定寬高之后表現為矩形。通過設定border-radius可以得到圓角矩形，圓形和橢圓形。

前面有文章CSS繪制三角形和箭頭，不用再用圖片了，可以先去了解一下！

在使用border-radius時，有幾點可能需要注意一下：

1. border-radius，可以分別對4個角進行設定。例如上圖：border-top-left-radius: apx bpx;

2. border-xxx-xxx-radius的兩個值分別代表著橢圓長軸和短軸長度的一半，通常簡寫的時候例如3. border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明長軸和短軸的長度均為20px，也就是半徑為10px的圓形（圓角部分）。

3. 當使用百分比數值時，a 相對于width， b相對于height

如果a==width/2, b==height/2，結果就是一個橢圓，與此同時a==b，那么就可以得到一個半徑為a的圓形了。

在看三角形之前，首先看看三角形的“繪制者”border，下面的例子：

純CSS3繪制騰訊QQ的企鵝Logo

.test{
 border: 20px solid;
 border-top-color:#4e5ecf;
 border-right-color:#ee1166;
 border-bottom-color:#44bb44;
 border-left-color:#775544;
 width:100px;
 height: 100px;
 background: #272822;
}

將每個boder的顏色值設為不一樣，就可以清楚的看到每個border的負責區域，有三角形的雛形了。其實，繪制三角形的原理很簡單，如下圖

純CSS3繪制騰訊QQ的企鵝Logo

我們可以這樣去理解一個border所代表的區域，那就是“三角形x2 + 矩形”，以border-bottom為例，

矩形=width x ( border-bottom-width )

相鄰的border交叉的區域構成一個矩形，每個border各負責一半，一個直角三角形。只要將其中的一個border的顏色值設為transparent或者背景色，從視覺上就可以得到一個直角三角形了。

三角形1=border-left-width x border-bottom-width
三角形2=border-right-width x border-bottom-width

當width=0 （height=0, border-left || border-right）時，我們通過調整border的寬度可以將這兩個直角三角形拼接成任意形狀的三角形，或者調整width(height)等獲得一個梯形，當然梯形也可以通過拼圖得到，這樣不是更簡單嗎？。Transform中旋轉將為我們提供更多的靈活變化。

繪制企鵝

結束了對于基本圖形部分的一些討論，開始著手于QQ 企鵝的繪制。

第一步當然是基本框架的繪制了。

通過對手里的Logo圖像的觀察，按照層次劃分來組合最終的效果。選擇使用絕對位置position:absolute;來布局各個元素。主要劃分為頭部，身體，圍脖，雙手，雙腳。

框架的結果圖：

純CSS3繪制騰訊QQ的企鵝Logo

介紹下這個過程中幾個比較典型的圖形繪制方法：

1、企鵝的眼睛：橢圓，直接設置border-radius:50% 50%; 即可（因為寬高分別為44px和66px，所以也可以這樣設定：border-radius: 22px / 33px）

2、圍脖的尾部：一個圓角各異的矩形，所以這里需要對幾個角分別設定border-radius，微調的結果為

border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;

3、企鵝的胳膊：手的繪制較為麻煩一點，可以分為上下兩個部分，將繪制的結果拼接到一起。那么對于不需要的部分怎么辦呢？我們可以將上(下)部分放到一個div(container)中，利用overflow:hidden的屬性來截取所要的部分。繪制復雜圖形的時候常用的方法就是切割和拼接，將圖形切割成一個個簡單的小塊，通過層疊和旋轉變化進行組合。

使用transform:rotate(deg)的時候，優先設定transform-origin屬性，會比較方便。設定的點作為中心點，整個圖形繞著這個點進行角度變化。例如：transform-origin:bottom left，使用左下角作為原點。也可以使用具體的像素值和百分比。

在基本的框架線條中比非常多的使用了border-radius用于構造各種曲線條，小企鵝是圓圓胖胖的，:)

接下來就是對只有基本線條的小企鵝進行著色了。著色的過程可以幫助我們調整z-index，也就是各個模塊的重疊層次，遮蓋了一些無用的線條和框角。

公告

喜歡小編的點擊關注，了解更多知識！

演示地址和源碼點擊下方“了解更多”

在線咨詢

上一篇：抖音上很火的3D立體動態相冊實現代碼！趕快學起來吧
下一篇：Vue 3 組件開發（一）：搭建表格編輯系統 - 環

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端技巧：用css畫一個QQ瀏覽器圖標

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

3、給 logo 的 after 上個灰色，做出鏤空效果：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

公告

您的項目需求