Heart Beat
实现关键：
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的更多相关文章
- 品牌营销：不要Beat，要逼格！
品牌营销:不要Beat,要逼格! 奥美的创始人大卫·奥格威说,广告营销应当是"具有风度的推销产品".而当下的营销手段,"风度"早已被抛之脑后, ...
- heart beat/心跳包
为什么需要heart beat/心跳包?因为tcp keep-alive不能满足人们的实时性的要求,就是这么简单. socket的长时间连接的话,是需要心跳包.心跳包就是维持双方的连接,每隔一段时间发 ...
- DFS HDOJ 2614 Beat
题目传送门 /* 题意:处理完i问题后去处理j问题,要满足a[i][j] <= a[j][k],问最多能有多少问题可以解决 DFS简单题:以每次处理的问题作为过程(即行数),最多能解决n个问题, ...
- Beat the Spread![HDU1194]
Beat the Spread! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Beat It
They Told Him他们告诉他: Don't You Ever Come Around Here “你胆敢再来? Don't Wanna See Your Face, 不想再见你, You Be ...
- Celery beat实现定时/轮询任务
Celery定时任务 配置 启用Celery的定时任务需要设置CELERYBEAT_SCHEDULE . Celery的定时任务都由celery beat来进行调度.celery beat默认按照s ...
- windows中执行celery beat任务
由于最新的celery4.2不支持windows系统,因此按照网上的建议安装了3.1.25版.按照官网的说明使用 app.conf.beat_schedule = { 'add-every-30-se ...
- 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. ...
- Android Studio Beat版公布！
Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!
- django 异步任务实现及Celery beat实现定时/轮询任务
Celery定时任务 requirements celery==3.1.25 异步任务 django-celery==3.2.2 定时任务管理包 redis==2.10.6 django-redis- ...
随机推荐
- Mac Chrome-点击书签页在新的标签打开之方法
PS:一直使用的是Firefox,但是现在Firefox有些不能满足我现在的需求,所以下载了chrome.可是当使用chrome时发现有一个很实用的功能它不能设置,这个让我很抓狂. 当点击标签时不能新 ...
- What to do about Eclipse's “No repository found containing: …” error messages?
As Mauro said: "you have to remove and re-add the Eclipse Project Update site, so that its meta ...
- cmd下复制粘贴
cmd下复制粘贴的快捷操作方式 工具/原料 系统cmd 步骤/方法 1 如右图,右键命令提示符窗口的标题栏,选择属性. 2 选择“编辑选项”里的“快速编辑模式”,并确定之: 3 在弹出的应用选择提示框 ...
- Qt 学习之路 2（19）：事件的接受与忽略（当重写事件回调函数时，时刻注意是否需要通过调用父类的同名函数来确保原有实现仍能进行！有好几个例子。为什么要这么做？而不是自己去手动调用这两个函数呢？因为我们无法确认父类中的这个处理函数有没有额外的操作）
版本: 2012-09-29 2013-04-23 更新有关accept()和ignore()函数的相关内容. 2013-12-02 增加有关accept()和ignore()函数的示例. 上一章我们 ...
- JS之RegExp对象(二)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/24243159 RegExp对象的经常 ...
- SQL Server 2012 从备份中还原数据库
1.首先把原数据库备份,检查原数据库的日志文件是否太大,如果过于大应该先收缩数据库日志 2.把备份的数据库文件在目标SQL Server还原,点击数据库,选择“还原文件或文件组” 3.如果需要修改还原 ...
- 初识JVM虚拟机
前言: Java语言里负责解释执行字节码文件的是Java虚拟机,即JVM——Java Virtual Machine(Java虚拟机). 执行Java程序的两个步骤: 由Java语言编写的程序需要进过 ...
- ValueError: Some of types cannot be determined by the first 100 rows, please try again with sampling
ValueError: Some of types cannot be determined by the first 100 rows, please try again with sampling ...
- HDU1402：A * B Problem Plus（FFT与大数乘法）
Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: th ...
- SQL Server 日期转换成字符串
参考网址:http://wenku.baidu.com/view/970c6c1655270722192ef70e.html 下面是常用的几个 --返回06-27-13 ), ) --2013-06- ...