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. #研发解决方案#分布式并行计算调度和管理系统Summoner

    郑昀 创建于2015/11/10 最后更新于2015/11/12 关键词:佣金计算.定时任务.数据抽取.数据清洗.数据计算.Java.Redis.MySQL.Zookeeper.azkaban2.oo ...

  2. 在iPhone上同时关闭语音控制和siri的方法

    分享 步骤及要点:1.在设置里打开siri.语音控制就自动关闭了.2.在siri里的"仅语言拨号"语言项里选择"土耳其文"或者"阿拉伯文". ...

  3. linux(debian) arm-linux-g++ v4.5.1交叉编译 embedded arm 版本的QtWebkit (browser) 使用qt 4.8.6 版本

    最近需要做一个项目 在arm 架构的linux下 没有桌面环境的情况下拉起 有界面的浏览器使用. 考虑用qt 的界面和 qtwebikt 的库去实现这一系列操作. 本文参考: Qt移植到ARM Lin ...

  4. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  5. / fluxChatDemo / 系列 ——fluxDemoChat 组件编写

    还是用各部分来表示过程吧,没文采,就先这样记着吧 嘻嘻 梳理问题: 编写es6风格的组件时,需要引入import React from ‘react’ 然后页面就华丽丽的展示出了我写的1.2两个字 在 ...

  6. 淘宝SDK扒出来的CURL调用含文件上传代码

    <?php function curl($url,$postFields=null){ $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,$url); c ...

  7. MYSQL 5.0 USING BTREE 错误

    今天遇到个错误,导入数据库的时候报错,最后发现是php版本的问题导致包含 KEY `uniacid` (`uniacid`) USING BTREE 的SQL命令报错 5.1之前的写法: KEY `u ...

  8. ES6(五) 数组扩展

    Array.of方法用于将一组值,转换为数组.  Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...

  9. JDBC增删改查简单测试

    首先编写一个entity以便与数据库表文件相对应 lyTable.java public class LyTable implements java.io.Serializable { private ...

  10. 浅谈C#中常见的委托<Func,Action,Predicate>（转）

    一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...