思路：利用两个长方形(比例是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动画）的更多相关文章

  1. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  2. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  3. [deviceone开发]-直播APP心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...

  4. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  5. css3动画特效：纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  6. iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer

    欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...

  7. qt 5 小练习 纯代码制作自定义按钮

    大家都知道QT设计师中直接拖动的按钮是长方形带有圆角的图案,那我们如何来设置自定义按钮呢 要设计一个按钮,我们必须要知道按钮有什么属性,首先,按钮必须有一个位置 第二,按钮必须有一个名称.还有当我们点 ...

  8. Python 一行代码输出心形图案

    Python3 >>> print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0. ...

  9. android Animation动画的xml使用

    在Android应用程序,使用动画效果,能带给用户更好的感觉,做动画能够通过XML或Android代码来实现. Animation动画效果的实现能够通过两种方式进行实现,一种是tweened anim ...

随机推荐

  1. vue 下拉刷新数据的插件的使用：

    1.安装: npm i vue-scroller -S npm install vue-scroller -D 2.在需要加载的页面中引入,或在公共js文件中引入: import VueScrolle ...

  2. thrift原理与架构

    是什么: 一个RPC框架.

  3. 在论坛中出现的比较难的sql问题：28(循环查询表来实现递归)

    原文:在论坛中出现的比较难的sql问题:28(循环查询表来实现递归) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  4. elasticsearch 开机自启

    linux下开机自启: 在/etc/init.d目录下新建文件elasticsearch 并敲入shell脚本: #!/bin/sh #chkconfig: #description: elastic ...

  5. 【转载】 C#使用Union方法求两个List集合的并集数据

    在C#语言的编程开发中,有时候需要对List集合数据进行运算,如对两个List集合进行交集运算或者并集运算,其中针对2个List集合的并集运算,可以使用Union方法来快速实现,Union方法的调用格 ...

  6. 使用Django时需要注意的八个要点

    1.在settings.py中使用os. path.dirname() 常用代码如下: # settings.py import os PROJECT_DIR = os.path.dirname(__ ...

  7. python渗透库大集合

    l Scapy:一款强大的交互式数据报分析工具,可用作发送.嗅探.解析和伪造网络数据包. l pypcap.Pcapy和pylibpcap:配合libpcap一起使用的数据包捕获模块 l libdne ...

  8. Mac下多版本JDK安装及管理

    在Java项目中,经常对JDK版本有不同的要求,可是不可能为了某个项目的运行重新下载不同版本JDK进行安装,这样就涉及到对本地环境中多个JDK版本的管理. Mac的JDK都是安装到一个指定目录的:/L ...

  9. JAVA多线程之UncaughtExceptionHandler——处理非正常的线程中止

    JAVA多线程之UncaughtExceptionHandler——处理非正常的线程中止 背景 当单线程的程序发生一个未捕获的异常时我们可以采用try....catch进行异常的捕获,但是在多线程环境 ...

  10. Computer Vision_33_SIFT：TILDE: A Temporally Invariant Learned DEtector——2014

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...