实现关键：

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. 《TCP/IP具体解释》读书笔记（22章）－TCP的坚持定时器

    TCP通过让接收方指明希望从发送方接收的数据字节数(即窗体大小)来进行流量控制. 假设窗体大小为0会发生什么情况呢?这将有效阻止发送方传送数据,直到窗体变为非0为止. ACK的传输并不可靠,也就是说, ...

  2. 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化

    淘宝官网(http://www.taobao.com/)样式初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...

  3. 不同节点 IP 时间同步 分布式时间同步系统的参考时间获取技术分析

    linux linux下时间同步的两种方法分享_LINUX_操作系统_脚本之家 http://www.jb51.net/LINUXjishu/73979.html 分布式时间同步系统的参考时间获取技术 ...

  4. VS2013如何调用别人发布的WebService程序

    这篇经验会告诉我们如何调用别人发布的WebService,并且需要注意的事项.现在就拿获取天气预报的接口举例,因为文中不允许有链接,所以在下文图中有WebService链接的地址. 工具/原料 VS2 ...

  5. 深入理解Java执行时数据区

    前情回想 在本专栏的前12篇博客中. 我们主要大致介绍了什么是JVM, 而且具体介绍了class文件的格式. 对于深入理解Java, 或者深入理解运行于JVM上的其它语言, 深入理解class文件格式 ...

  6. linux下nginx模块开发入门

    本文模块编写参考http://blog.codinglabs.org/articles/intro-of-nginx-module-development.html 之前讲了nginx的安装,算是对n ...

  7. 并不对劲的bzoj4816:loj2000:p3704[SDOI2017]数字表格

    题目大意 有函数\(f(x)\),\(f(0)=0,f(1)=1,f(x)=f(x-1)+f(x-2)\) \(t\)(\(t\leq1000\))组询问,每次给定\(n,m\)(\(n,m\leq1 ...

  8. Spring配置事务的五种方式

    Java事务的类型有三种: JDBC事务. 可以将多个 SQL 语句结合到一个事务中.JDBC 事务的一个缺点是事务的范围局限于一个数据库连接.一个 JDBC 事务不能跨越多个数据库 JTA(Java ...

  9. BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树

    BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树 题意:给出每个果汁的价格p,美味度d,最多能放的体积l.定义果汁混合后的美味度为果汁的美味度的最小值. m次询问,要求花费不大于g, ...

  10. 如何编写linux下nand flash驱动-1

    1.       硬件特性: [Flash的硬件实现机制] Flash全名叫做Flash Memory,属于非易失性存储设备(Non-volatile Memory Device),与此相对应的是易失 ...