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. web存储

    1. cookie: 如果想将cookie取到,可以通过document.cookie;取到的是所有的cookie数据 他是一直保存在网页中的:他有一个时间的限制,如果时间过期,则删除 写入:docu ...

  2. 20145216 20145330 《信息安全系统设计基础》 实验五 简单嵌入式WEB 服务器实验

    20145216 20145330 <信息安全系统设计基础> 实验五 简单嵌入式WEB 服务器实验 实验报告封面 实验步骤 1.阅读理解源码 进入/arm2410cl/exp/basic/ ...

  3. 【Telerik】弹出对话框RadWindow，确认删除信息

    要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.

  4. 使用mybatis-generator生成代码

    文档地址: ​http://mbg.cndocs.tk/index.html ​ 以下是一个简单的配置内容. 一.在maven配置文件中添加mybatis-generator插件 1 2 3 4 5 ...

  5. IRP完成例程返回值理解

    第一,完成例程里面直接返回STATUS_SUCCESS,这时候IRP已经继续向上回卷,失去了对IRP的控制. 第二,完成例程里面返回STATUS_MORE_PROCESSING_REQUIRED,仍具 ...

  6. 用字符流实现每个文件夹中创建包含所有文件信息的readme.txt

    package com.readme; import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; i ...

  7. dev GridControl 根据鼠标坐标 选中行

    if (e.Button == System.Windows.Forms.MouseButtons.Right) { DevExpress.XtraGrid.Views.Grid.ViewInfo.G ...

  8. 跨平台移动开发UI语言 -XAML

    Xamarin.Forms 把XAML (Extensible Application Markup Language, XAML) 带进了ios,android的界面开发,也就使得使用Xamarin ...

  9. 浅谈WEB跨域的实现（前端向）

    同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求 ...

  10. 走向面试之数据库基础：三、SQL进阶之变量、事务、存储过程与触发器

    一.变量那点事儿 1.1 局部变量 (1)声明局部变量 DECLARE @变量名 数据类型 ) DECLARE @id int (2)为变量赋值 SET @变量名 =值 --set用于普通的赋值 SE ...