实现关键：

1.纯css实现心形图（如果使用图片则无需）

html代码：

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

 </head>

 <body>

 <div class="heart"></div>

 </body>

 </html>

添加基本css：

 body{

   background:#ccc;

 }

 .heart{

   position:relative;

   height:90px;

   width:120px;

   margin:150px auto;

 }

实现爱心图1：

 .heart:before,

 .heart:after{

   content:"";

   position:absolute;

   width:60px;

   height:80px;

   top:; 

   border-top: 10px #cf2e3b solid;

   border-radius:50px 50px 0 0;

 }

 .heart:before{

   left:60px;

   background:#cf2e3b;

 }

 .heart:after{

   background:#cf2e3b;

 }

实现爱心图2，左半部份逆时针45度，右边顺时针45度

.heart:before,

.heart:after{

  content:"";

  position:absolute;

  width:60px;

  height:80px;

  top:; 

  border-top: 10px #cf2e3b solid;

  border-radius:50px 50px 0 0;

}

.heart:before{

  left:60px;

  background:#cf2e3b;

  transform:rotate(-45deg);

  transform-origin:0 100%;

}

.heart:after{

  background:#cf2e3b;

  transform:rotate(45deg);

  transform-origin:100% 100%;

}

2.心跳动画

.heart{

  position:relative;

  height:90px;

  width:120px;

  margin:150px auto;

  animation:beat 1.5s ease-out;

  animation-iteration-count: infinite;

}

@keyframes beat{

  0%  { transform:scale(1);   }

  25% { transform:scale(0.9); }

  50% { transform:scale(1.1); }

  75% { transform:scale(1);   }

  100%{ transform:scale(1);   }

}

运行结果：http://output.jsbin.com/nihizox

Heart Beat的更多相关文章

  1. 品牌营销：不要Beat，要逼格！

             品牌营销:不要Beat,要逼格! 奥美的创始人大卫·奥格威说,广告营销应当是"具有风度的推销产品".而当下的营销手段,"风度"早已被抛之脑后, ...

  2. heart beat/心跳包

    为什么需要heart beat/心跳包?因为tcp keep-alive不能满足人们的实时性的要求,就是这么简单. socket的长时间连接的话,是需要心跳包.心跳包就是维持双方的连接,每隔一段时间发 ...

  3. DFS HDOJ 2614 Beat

    题目传送门 /* 题意:处理完i问题后去处理j问题,要满足a[i][j] <= a[j][k],问最多能有多少问题可以解决 DFS简单题:以每次处理的问题作为过程(即行数),最多能解决n个问题, ...

  4. Beat the Spread![HDU1194]

    Beat the Spread! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. Beat It

    They Told Him他们告诉他: Don't You Ever Come Around Here “你胆敢再来? Don't Wanna See Your Face, 不想再见你, You Be ...

  6. Celery beat实现定时/轮询任务

    Celery定时任务 配置 启用Celery的定时任务需要设置CELERYBEAT_SCHEDULE .  Celery的定时任务都由celery beat来进行调度.celery beat默认按照s ...

  7. windows中执行celery beat任务

    由于最新的celery4.2不支持windows系统,因此按照网上的建议安装了3.1.25版.按照官网的说明使用 app.conf.beat_schedule = { 'add-every-30-se ...

  8. ZOJ2388 Beat the Spread! 2017-04-16 19:18 91人阅读 评论(0) 收藏

    Beat the Spread! Time Limit: 2 Seconds      Memory Limit: 65536 KB Superbowl Sunday is nearly here. ...

  9. Android Studio Beat版公布！

    Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!

  10. django 异步任务实现及Celery beat实现定时/轮询任务

    Celery定时任务 requirements celery==3.1.25 异步任务 django-celery==3.2.2 定时任务管理包 redis==2.10.6 django-redis- ...

随机推荐

  1. 如何使Linux系统上的程序开机后自动运行 （转）

    Linux有自己一套完整的启动体系,抓住了Linux启动的脉络,Linux的启动过程将不再神秘. 阅读之前建议先看一下附图. 本文中假设inittab中设置的init tree为: /etc/rc.d ...

  2. 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) D.Dinner Bet 概率DP+排列组合

    题目链接:点这里 题意: 1~N标号的球 现在A有C个,B有C个 每次可以随机得到D个不同的球(1~N);问你A或B中的C个球都出现一次的 期望次数 题解: dp[i][j][k]表示 随机出现了i个 ...

  3. ZOJ 3962 E.Seven Segment Display / The 14th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple E.数位dp

    Seven Segment Display Time Limit: 1 Second      Memory Limit: 65536 KB A seven segment display, or s ...

  4. 卸载ubuntu自带openJDK,更改成自己的JDK版本

    你已经成功把jdk1.6.0_03 安装到 /usr/java,并且配置好了系统环境变量 执行 # java -version 时就是 显示jdk1.4.3,是因为你的linux系统有默认的jdk;执 ...

  5. What's the difference between jquery.js and jquery.min.js?

    They are both the same functionally but the .min one has all unnecessary characters removed in order ...

  6. （2）mac下安装MySql数据库软件

    一,软件下载: https://dev.mysql.com/downloads/mysql/ 也可以从其他资源下载.不一定非要官方下载 二,安装 这个比较简单,之间双击开启安装程序,一直下一步就可以. ...

  7. 使用C#开发HTTP服务器系列之实现Get和Post

     各位朋友大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.在我们这个Web服务器有了一个基本的门面以后,我们是时候来用它做点实际的事情了.还记得我们 ...

  8. 二:多线程--GCD

    一.简单介绍 1.GCD全称是Grand Central Dispatch,可译为“牛逼的中枢调度器”,纯C语言,提供了非常多强大的函数 2.GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方 ...

  9. 并不对劲的bzoj4198:loj2132:uoj130:p2168:[NOI2015]荷马史诗

    题目大意 有\(n\)(\(n\leq10^5\))种单词,其中第\(i\)种单词在文章中的出现次数为\(w_i\) 要将每个单词替换成一个字符集为\(k\)(\(k\leq9\))的字符串,使对于任 ...

  10. BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组

    BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组 Description Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是 ...