整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
注册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小时内与您取得联系。
