心跳（纯代码制作心形，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 ...
随机推荐
- vs2017环境下python包的安装
1)---vs已经下载了的才适用 1,鼠标放在右侧窗口python环境那里(如没有窗口,可点击最上方的“窗口”-“重置窗口”) 2,右键然后点击“查看所有python环境”,会弹出当前默认的环境(高亮 ...
- PAT-1030 Travel Plan (30 分) 最短路最小边权 堆优化dijkstra+DFS
PAT 1030 最短路最小边权 堆优化dijkstra+DFS 1030 Travel Plan (30 分) A traveler's map gives the distances betwee ...
- 查看IIS错误日志
部署在IIS中的程序,难免出现数据产生异常 在事件查看器中,可以看出来具体的错误信息,代码定位
- python——操作系统的发展史
一.手工操作 —— 穿孔卡片 1946年第一台计算机诞生--20世纪50年代中期,计算机工作还在采用手工操作方式.此时还没有操作系统的概念. 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入 ...
- 开源项目hutool之zip_slip漏洞
今天突然看到了去年写的一篇漏洞分析文章,搬到博客上 ---------------- Hutool是Github上的一个开源项目,是一个java的工具包,对文件.流.加密解密.转码.正则.线程.XML ...
- 网络基础 InetAddress
IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 虚拟机VMware安装
1.进入VMware官网,下载 (点击进入官网) 2.下载镜像文件 (点击进入官网下载) 3.下载好后,打开VMware,点击创建新的虚拟机 4.点击下一步,并找到刚才下载好的镜像文件 5.跟随系统点 ...
- c# 子类的声明
- webpack中bundler源码编写
新建一个项目,再新建一个src文件夹,里面有三个文件,word.js,message.js,index.js word.js export const word = 'hello'; message. ...