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. [Protobuf] Mac系统下安装配置及简单使用

    Mac下Protobuf安装 Protobuf源码Github地址: https://github.com/google/protobuf 配置环境教程: https://github.com/goo ...

  2. 在linux下Ant的环境配置

    Ant(英文全称为another neat tool,另一个简洁的工具)是一个基于Java的生成工具,Ant将会被应用到Java项目中． 同样的,现在要来安装Ant(最近要安装的东西还蛮多的＝m＝), ...

  3. OpenCV学习笔记（一）——OpenCV3.1.0+VS2015开发环境配置

    摘要: 由于最近AR(增强现实)这个概念非常火爆,各种基于AR的应用及游戏逐渐面向大众,而在AR中最重要的两个技术就是跟踪识别和增强渲染,其中跟踪识别是通过OpenCV这个开源的计算机视觉库来实现的, ...

  4. 将Web应用发布到tomcat中的三种方法

    坑啊,为什么网易的博客不能搬过来!!!我一个一个复制过来容易嘛!!!!原文地址:http://buffalo-l.blog.163.com/blog/static/244954022201539111 ...

  5. phpcms 服务器安全认证错误

    本人将图片的js.images.css路径转移到CDN上了,上传附件的时候就出现了 “服务器安全认证错误”的提示.   找到文件 D:\wamp\www\phpcms\phpcms\modules\a ...

  6. 安装SQL Server2016正式版

    安装SQL Server2016正式版 今天终于有时间安装SQL Server2016正式版,下载那个安装包都用了一个星期 安装包可以从这里下载: http://www.itellyou.cn/ ht ...

  7. 一步一步学ROP之linux_x86篇

    一步一步学ROP之linux_x86篇 作者:蒸米@阿里聚安全 ​ 一.序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过 ...

  8. 【nginx配置】nginx做非80端口转发

    一个场景 最近在使用PHP重写一个使用JAVA写的项目,因为需要查看之前的项目,所以要在本地搭建一个Tomcat来跑JAVA的项目.搭建成功后,因为Tomcat监听的端口是8080,因此,访问的URL ...

  9. Key/Value之王Memcached初探：三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

  10. Ubuntu系统字体安装

    用惯了Windows,刚转到Ubuntu时总感觉字体显示没那么亲切,尤其是中文字体,在网页上显示特别怪.有些软件对中文字体的支持也不好,WebStorm中的Git logs中文也显示乱码.把系统语言设 ...