1.功能需求：

最近有一个基于微信开发的Mobile Web项目，是一个活动页面。功能需求：用户使用微信扫描二维码，然后授权使用微信登录，然后读取用户的昵称和头像，然后显示在一个饼图上面。头像需要有一个心形套住，大家看到很多页面，都是使用圆形套住，比如新版的手机QQ联系人，截图如下：

 

微信登录如图，拿的微信开放平台的美丽说的截图：

2.实现代码

<!DOCTYPE html><html>    <head>        <title>css3制作心形头像</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <style type="text/css">            #headimage{                position: absolute;                top: 50%;                left: 50%;            }            /*心形头像*/            .heart{                float:left;                width:90px;height:54px;position:relative;            }            /* after 伪元素在元素之前添加内容*/            .heart .before{                content:" ";                border-radius:160px 160px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */                -moz-border-radius: 160px 160px 0 0;                -ms-border-radius: 160px 160px 0 0;                -o-border-radius: 160px 160px 0 0;                -webkit-border-radius: 160px 160px 0 0;                width:60px; height:100px;/* 长方形 */                -moz-transform: rotate(-45deg);/* 逆时针旋转45°*/                -ms-transform: rotate(-45deg);                -o-transform: rotate(-45deg);                -webkit-transform: rotate(-45deg);                position:absolute;                left:10px;                overflow: hidden;            }            .before > div {                width: 120px;                height: 120px;                background-size: 120px;                position: absolute;                bottom: 0px;                left: -100%;                -webkit-transform: rotate(45deg);                -webkit-transform-origin: bottom center;            }            /* after 伪元素在元素之后添加内容*/            .heart .after{                content:" ";                width:60px; height:100px;                border-radius:160px 160px 0 0;                -moz-border-radius:160px 160px 0 0;                -ms-border-radius:160px 160px 0 0;                -o-border-radius: 160px 160px 0 0;                -webkit-border-radius: 160px 160px 0 0;                -moz-transform: rotate(45deg);                -ms-transform: rotate(45deg);                -o-transform: rotate(45deg);                -webkit-transform: rotate(45deg);                position:absolute;                left:38px;top:0px;                overflow: hidden;            }            .after > div {                width: 120px;                height: 120px;                background-size: 120px;                position: absolute;                bottom: 0px;                right: -100%;                -webkit-transform: rotate(-45deg);                -webkit-transform-origin:bottom center;            }            body{                width:400px;                height:400px;                margin: 0 auto;            }        </style>    </head>    <body>                <h3>原始图片:</h3>        <div style="text-align:center;">            <img src="images/1.jpg" alt="用户头像"/>        </div>        <h3>心形头像:</h3>        <div id="headimage">            <!--                <img id="headimgurl" style="width:80px;height:80px;border-radius: 40px;"/>-->            <!--css3制作心形头像-->            <div class="heart">                <div class="before">                    <div class="userphoto"><img src="images/1.jpg" alt="用户头像"/></div>                </div>                <div class="after">                    <div class="userphoto"><img src="images/1.jpg" alt="用户头像"/></div>                </div>            </div>        </div>    </body></html>

效果如图：

3.参考网址：

1.手机QQ http://im.qq.com/mobileqq/

2.微信登录介绍 https://open.weixin.qq.com/

 

CSS3制作心形头像的更多相关文章

  1. 心跳（纯代码制作心形，animation动画）

    思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...

  2. css3心形 perspective transform

    CSS3挺有趣的,能实现不少动画,以下为娱乐内容 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  3. CorelDRAW快速制作绚丽的彩色透明心形

    今天小编分享给小伙伴们用CorelDRAW打造绚丽的彩色透明心形.主要使用完美形状组中的心形造型制作出心形图案,经过对图形的模糊操作,再经过图框精确剪裁,最后添加一个彩虹渐变色实现绚丽的彩色透明效果. ...

  4. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  5. CSS3制作各种形状图像

    圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面(亲测的) ------转自百 ...

  6. CSS3制作各种形状图像（转）

    CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...

  7. 使用CSS3制作各种形状

    CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用.以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了.通过使用新的CSS属 ...

  8. 使用CSS3制作各种图形

    1.正圆形 代码: HTML代码: <div class="circle"></div> CSS代码: .circle { width: 100px; he ...

  9. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

随机推荐

  1. How to make your assembly more secure from referencing by unauthorized bits

    Now the security has a trend to become more and more important in our daily work, hence I did some r ...

  2. 基于node.js的压缩合并安装

    1.构建工具(grunt,gulp) 下载地址:http://gruntjs.cn/http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) 验证 ...

  3. windows下C++高精度计时

    写代码时,经常会计算某一段代码的运行时间,以下提供一个微秒级别的类供参考 class CTimeCost { public: CTimeCost(const string &str) : m_ ...

  4. [学习笔记] Inten

  5. Windows和Linux都有的Copy-on-write技术

    Windows和Linux都有的Copy-on-write技术 MySQL技术内幕Innodb存储引擎第2版 P375 SQL Server2008 实现与维护(MCTS教程)P199 LVM快照技术 ...

  6. ASP.NET Web API路由系统：路由系统的几个核心类型

    虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分(定义在程序集System.Web.Http.dll中)已经移除 ...

  7. 如果调用ASP.NET Web API不能发送PUT/DELETE请求怎么办？

    理想的RESTful Web API采用面向资源的架构,并使用请求的HTTP方法表示针对目标资源的操作类型.但是理想和现实是有距离的,虽然HTTP协议提供了一系列原生的HTTP方法,但是在具体的网络环 ...

  8. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的？

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  9. Aspose.Words 16.8 破解版、添加自定义HTML导出Jpeg压缩质量配置

    0x01 Aspose.Words 介绍Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDo ...

  10. 台式电脑、笔记本快捷选择Boot(启动项快捷键)大全

    我们在安装系统时,会去设置电脑是从硬盘启动.U盘启动.光驱启动.网卡启动. 一般设置的方法有两种:一种是进BIOS主板菜单设置启动项顺序:另一种就是我在这里要介绍的快捷选择启动项. 以下是网友整理的各 ...