整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
注冊9位QQ號
https://ssl.zc.qq.com/v3/index-chs.html?type=3
近用CSS設計LOGO上癮了，前兩天分享了《教你使用純CSS設計HTML5新LOGO》和《教你使用CSS3設計Opera瀏覽器LOGO》，今天在微博上看到有新浪的朋友用CSS3實現的新浪微博LOGO（如下圖所示），一時手癢，就順手也用CSS3實現了一個QQ的LOGO。
?
目前只支持Chrome觀看，效果如下圖所示：
主要用到的CSS3屬性如下所示：
1、border-radius
CSS3中應用最普遍的屬性，用于設置邊框圓角，可以采用border-top-left-radius的方式單獨設置每個圓角，并可以設置。
1）例如要實現1個圓，可以使用如下代碼：
width: 240px;
height: 240px;
-webkit-border-radius: 120px;
效果如下圖所示：
2）要實現1/4個圓，可以用如下代碼：
width: 240px;
height: 240px;
-webkit-border-bottom-left-radius: 240px 240px;
效果如下圖所示：
3）要實現1/8個圓，可以用如下代碼：
border-top: 240px solid #2ec8e9;
-webkit-border-top-left-radius: 240px;
width: 240px;
2、-webkit-transform
主要使用了rotate旋轉屬性，可以控制元素向左向右旋轉。下圖里的箭頭就是用-webkit-transform:rotate屬性實現的。順便提一句scale縮放屬性里如果值為-1，也是有旋轉效果的。
3、-webkit-box-shadow
盒陰影，可以設置元素的陰影。如上圖所示。
4、RGBA
RGBA也是CSS3中非常實用和強大的一個功能，以前所有使用RGB HTML的地方都可以使用RGBA的格式來設置透明度。例如QQ瀏覽器的九宮格可以做成如下顯示方式：
這就是采用RGBA的透明效果實現的，具體實現方式可以參考《瀏覽器九宮格的簡單實現》一文。
用CSS打造QQ標志設計教程分享完成，那么，你會了嗎？不會也沒關系，用logofree商標在線制作器也可以直接生成類似LOGO，如果生成的標志還不滿意，那LOGO高端定制是您的最佳選擇。
轉載：http://www.logofree.cn/news/shejizhishixuexi/css3qqlogo.html
https://connect.qq.com/
<script type="text/javascript" charset="utf-8"
src="//connect.qq.com/qc_jssdk.js"
data-appid="APPID" // 審核通過的APPID
data-redirecturi="REDIRECTURI" // 網站回調地址。回調地址必須以http或https開頭。騰訊目前業務線都已切至https.所以建議此處都填寫https.如果網站不支持，請自行升級
></script>在html頁面需要插入QQ登錄按鈕的位置，粘貼如下代碼：
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按鈕的節點id
});
</script>注：如需自定義按鈕。則將上面代碼生成的html（即<span id="qqLoginBtn"></span>節點里面的代碼）粘貼在對應位置即可。
? ?<script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>注：如果回調地址頁與加入QQ登錄按鈕是同一個頁面，則只需要引用一次腳本文件。頁面URL地址中會在hash值部分加入access_token&expires_id=7776000。注意官網文檔上面說可以拿到openid.其實是不可以的。需要登錄后通過api拿到openid。
if(QC.Login.check()){ //如果已登錄
QC.Login.getMe(function(openId, accessToken){ // 注意業務中依賴openId和accessToken的需要寫入在回調里面
console.log(openId, accessToken)
});
}到此QQ互聯登錄的基本流程已結束。
https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
