思路：利用两个长方形(比例是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. AVR单片机教程——开发环境配置

    今天去交大密院参观了设计展,无外乎两个主题:Arduino.Python. 关于Python,我印象最深的是一位Python程序员的话:你要硬核的话,可以去那边看Java. 拜托,都9102年了,Ja ...

  2. Qt：用 __thread 关键字让每个线程有自己的全局变量

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/wsj18808050/article/d ...

  3. Golang高阶：Golang1.5到Golang1.12包管理

    Golang1.5到Golang1.12包管理 1. 前言 Golang 是一门到如今有十年的静态高级语言了,2009年的时候算是正式推出了,然后到最近的一两年,2017-2018年的时候,突然直线上 ...

  4. 在论坛中出现的比较难的sql问题：27(字符串拆分、字符串合并、非连续数字的间隔范围、随机返回字符串)

    原文:在论坛中出现的比较难的sql问题:27(字符串拆分.字符串合并.非连续数字的间隔范围.随机返回字符串) 在论坛中看到一个帖子,帖子中有一些sql方面的面试题,我觉得这些面试题很有代表性. 原帖的 ...

  5. springboot下@webfilter的使用

    启动类加了@ServletComponentScan,无论过滤器类加不加@Componment urlPatterns = {"/test/*"}都可以生效 单使用@Compone ...

  6. Java 之 OutputStreamReader类

    OutputStreamReader类 1.概述 转换流 java.io.OutputStreamReader ,是Writer的子类,是从字符流到字节流的桥梁. 它使用指定的字符集将字符编码为字节. ...

  7. 关于#error

    很简单的一个东西,但是感觉使用价值没有太大.实现了以下,结果如下: 执行到#error语句的时候直接停止编译,在下面输出设定好的错误信息. 来自为知笔记(Wiz)

  8. IO模型之NIO代码及其实践详解

    一.简介 NIO我们一般认为是New I/O(也是官方的叫法),因为它是相对于老的I/O类库新增的( JDK 1.4中的java.nio.*包中引入新的Java I/O库).但现在都称之为Non-bl ...

  9. Linux下知道一个命令却不知道哪个包提供（解决）

    [root@localhost ~]# yum -y install jstack (1/2): epel/x86_64/primary_db | 6.8 MB 00:00:16 (2/2): epe ...

  10. Django之form表单详解

    构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的模板: <form action="/your-name/" method=" ...