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. 命令行操作svn和git和git

    前几天在写代码的时候电脑突然坏掉,老大交代的任务没完成,非常痛恨自己用svn或者git保存代码,相信很多程序员遇到过,硬盘坏掉,存在硬盘中的代码丢失,无法找回的问题,svn和git可谓程序员界的福音, ...

  2. jq随手写图片放大

    html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...

  3. HTML Help WorkShop 创作、调用方法和技巧

    一.在CHM 文件中所用到的弹出式菜单: 二.在HTML Help WorkShop 中不用显示的样式   (1).从右到右阅读顺序. (2).对话框 (3).滚动条在左边 (4).仅展开单个标题   ...

  4. Ring0隐藏进程的方法

    第一种在系统调用服务表HOOK ZwQuerySystemInformation函数地址 使用InterlockedExchange函数将ZwQuerySystemInformation在内核导出表K ...

  5. Jquery源码学习（第一天）

    jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1" ...

  6. SSH学习笔记

    Struts2登录模块处理流程: 浏览器发送请求http://localhost/appname/login.action,到web应用服务器: 容器接收到该请求,根据web.xml的配置,服务器将请 ...

  7. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  8. like语句百分号前置会使用到索引吗？

    like语句百分号前置会使用到索引吗? 前几天看了这篇文章:谈SQL Server对like '%关键词%' 处理时的索引利用问题 看完了之后,我很想知道这篇文章是不是临时工写的?还是网站的主人写的, ...

  9. Microservice 微服务的理论模型和现实路径

    两年前接触到了微服务的概念,面对日益膨胀的系统感觉豁然开朗.之后的两年逐步把系统按微服务的架构理念进行了重构,并将业务迁移到了新架构之上.感觉现在差不多是时候写一篇关于微服务的总结文章了. 定义 在 ...

  10. Web应用程序的自动化测试库-FluentAutomation

    FluentAutomation是流畅的自动化应用编程接口,支持Selenium和WatiN 连同它们所有的风格和驱动程序.自从Fluient支持Selenium,那就意味着你可以使用Selenium ...