思路：利用两个长方形(比例是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. WUSTOJ 1302: 区间k大数查询（Java）

    题目链接:

  2. Shiro简介、入门案例、web容器的集成

    目的: shiro简介 Shiro入门案例 Shiro与web容器的集成 shiro简介(中文官网:https://www.w3cschool.cn/shiro/andc1if0.html) 1.什么 ...

  3. windows Git Bash 无法运行python文件的解决方法（转）

    https://blog.csdn.net/xie_0723/article/details/51958243

  4. 【转载】 Sqlserver使用Left函数从最左边开始截取固定长度字符串

    在Sqlserver数据库的字符串操作中,截取字符串是最常见的操作,sql server提供了3个常用截取字符串方法,LEFT().RIGHT().SUBSTRING(),如果从第一个字符即最左边位置 ...

  5. html+css+javascript网页制作技巧总结1

    (一)div.元素居中中显示方法: 1.宽度要有实际值或百分比值 2.margin:0px auto; 文本内容居中显示的方法: 1.text-align:center; 2.line-height: ...

  6. 高并发编程系列：ConcurrentHashMap的实现原理(JDK1.7和JDK1.8)

    HashMap.CurrentHashMap 的实现原理基本都是BAT面试必考内容,阿里P8架构师谈:深入探讨HashMap的底层结构.原理.扩容机制深入谈过hashmap的实现原理以及在JDK 1. ...

  7. U-Boot补丁 S3C2440

    # tar xvf u-boot-1.1.6.tar.bz2 //解压 # cd u-boot-1.1.6/ 制作补丁文件 # diff -urN u-boot-1.1.6 u-boot-1.1.6. ...

  8. java的输入流中的两个坑

    1.输入流的所有实例中的read()方法皆是阻塞的. 输入流只会在发生错误或者异常关闭的时候回返回-1,如果流中没有数据,不会返回-1而是一直阻塞. 2.BufferedReader的readLine ...

  9. 【nodejs代理服务器四】代理服务器增加频繁访问的ip加入黑名单

    问题 渗透者在扫站的时候会频繁请求,我们可以做一些策略来封堵这些频繁访问的ip,把ip加入黑名单. 策略 2秒之内访问次数超过100,加入黑名单. 实现思路 初次访问把访问Ip作为键,访问ip,时间, ...

  10. CentOS7安装CDH 第十四章：CDH的优化

    相关文章链接 CentOS7安装CDH 第一章:CentOS7系统安装 CentOS7安装CDH 第二章:CentOS7各个软件安装和启动 CentOS7安装CDH 第三章:CDH中的问题和解决方法 ...