心跳（纯代码制作心形，animation动画）
思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下：
<body>
<div></div>
</body>
div{
margin: 200px;
width: 200px;/* 盒子1宽高是2：3 */
height: 300px;
background: rgb(218, 9, 9);
position: relative;
border-radius: 100px 100px 0 0;/* 左上，右上变圆角 */
transform: rotate(-45deg);/* 逆时针旋转45deg放正 */
animation: heartbeat 1s ease 0s infinite normal;/* 调用heart动画 */
}
div::after{
content: "";
display: block;
width: 300px;
height: 200px;
background: rgb(218, 9, 9);
position: absolute;
bottom:;
left:;/* 添加一个盒子，宽高是3:2，然后定位在下面，颜色一样， */
border-radius: 0 100px 100px 0 ;/* 右上，右下变圆角 */
}
@keyframes heartbeat {
/* 声明一个名称为heart的动画 */
0%{
transform: scale(1) rotate(-45deg);/* 注意，前面使用了旋转，这里必须写上，不然会重叠效果 */
}
50%{
transform: scale(1.2) rotate(-45deg);
}
100%{
transform: scale(1) rotate(-45deg);
}
}
当然也有其他的方法制作心形，比如：两个圆 + 正方形，可以看另外一篇园友的文章：心跳 CSS
心跳（纯代码制作心形，animation动画）的更多相关文章
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- [deviceone开发]-心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...
- [deviceone开发]-直播APP心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- css3动画特效：纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer
欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...
- qt 5 小练习 纯代码制作自定义按钮
大家都知道QT设计师中直接拖动的按钮是长方形带有圆角的图案,那我们如何来设置自定义按钮呢 要设计一个按钮,我们必须要知道按钮有什么属性,首先,按钮必须有一个位置 第二,按钮必须有一个名称.还有当我们点 ...
- Python 一行代码输出心形图案
Python3 >>> print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0. ...
- android Animation动画的xml使用
在Android应用程序,使用动画效果,能带给用户更好的感觉,做动画能够通过XML或Android代码来实现. Animation动画效果的实现能够通过两种方式进行实现,一种是tweened anim ...
随机推荐
- PAT甲级题分类汇编——树
本文为PAT甲级分类汇编系列文章. AVL树好难!(其实还好啦~) 我本来想着今天应该做不完树了,没想到电脑里有一份讲义,PPT和源代码都有,就一遍复习一遍抄码了一遍,更没想到的是编译一遍通过,再没想 ...
- PowerBuilder学习笔记之行删除卡死问题
在数据窗口勾选这两个选项后,在删除行数据时会导致系统直接崩溃退出
- Springboot对JPA的支持及使用
目的: 1.springboot之jpa支持 2.Springboot+bootstrap界面版之增删改查及图片上传 springboot之jpa支持 导入相关pom依赖 <dependency ...
- FPS 游戏实现GDI透视
FPS游戏可以说一直都比较热门,典型的代表有反恐精英,穿越火线,绝地求生等,基本上只要是FPS游戏都会有透视挂的存在,而透视挂还分为很多种类型,常见的有D3D透视,方框透视,还有一些比较高端的显卡透视 ...
- springcloud 1.5 与 springcloud 2.0 配置区别
eureka配置区别: 1.5:${spring.cloud.client.ipAddress}:${server.port} 2.0:${spring.cloud.client.ip-address ...
- HTTP响应状态码整理
1xx:信息 100 Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求.101 Switching Protocols服务器转换协议:服务器将遵从客 ...
- vue 百度云上传文件PostObject
百度云上传文件 API(PostObject) PostObject接口 : 接口描述 此接口使用HTML表单上传文件到指定bucket,用于实现通过浏览器上传文件到bucket.在PutObjec ...
- mysql database和schema区别
在MySQL的语法操作中(MySQL5.0.2之后),可以使用CREATE DATABASE和CREATE SCHEMA来创建数据库,两者在功能上是一致的.在使用MySQL官方的MySQL管理工具My ...
- 简单web性能测试工具——ab命令（ApacheBench）
ab命令(ApacheBench) ----------转载内容 ApacheBench(即ab)通常用来做网站性能压力测试,是性能调优过程中必不可少的一环,ab命令会创建很多的并发访问线程,模拟多个 ...
- stm32 ADXL345传感器
加速度灵敏度轴 沿敏感轴加速时相应输出电压增加 寄存器映射 寄存器定义 0x31-DATA_FORMAT SELF_TEST位:设置为1,自测力应用至传感器,造成输出数据转换.值为0时,禁用自测力 S ...