思路：利用两个长方形(比例是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. 学习RadonDB源码（三）

    1. 所谓第四代语言 SQL是一种典型的第四代语言,即4GL,这种语言的突出特点是编写者不需要关注怎么做,只需要告诉系统我要什么就可以. 虽然4GL是这样的一种语言,大大简化了编写者的编写难度,其实底 ...

  2. 正整数序列 Help the needed for Dexter ,UVa 11384

    题目描述 Description 给定正整数n,你的任务是用最少的操作次数把序列1, 2, …, n中的所有数都变成0.每次操作可从序列中选择一个或多个整数,同时减去一个相同的正整数.比如,1,2,3 ...

  3. 手动实现自己的spring事务注解

    spring事务是基于同一个数据连接来实现的,认识到这一点是spring事务的关键,spring事务的关键点便在于在事务中不管执行几次db操作,始终使用的是同一个数据库连接.通过查看源码,我们可以看到 ...

  4. physdiskwrite 的简单使用

    physdiskwrite 的简单使用 参考  https://m0n0.ch/wall/physdiskwrite.php 来源 https://www.cnblogs.com/EasonJim/p ...

  5. java模板模式项目中使用--封装一个http请求工具类

    需要调用http接口的代码继承FundHttpTemplate类,重写getParamData方法,在getParamDate里写调用逻辑. 模板: package com.crb.ocms.fund ...

  6. 用D3js的区域生成器实现简单波浪图

    最近做控件遇到含有波浪图的图表,一开始用Echarts虽然很快完成了,但Echarts的波浪图与其他图表的响应式不同步,于是学习了D3js,D3js写起来确实复杂一些,但能够实现的效果也更丰富,做的时 ...

  7. Fortify漏洞之Path Manipulation（路径篡改）

    继续对Fortify的漏洞进行总结,本篇主要针对 Path Manipulation(路径篡改)的漏洞进行总结,如下: 1.Path Manipulation(路径篡改) 1.1.产生原因: 当满足以 ...

  8. Shodan全世界在线设备搜索引擎

    reproduction from https://danielmiessler.com/study/shodan/ What is Shodan? Shodan is a search engine ...

  9. c# 克隆来创建对象副本

  10. 系统API是原子操作吗？

    系统API里面也会有简单的指令,类似于a++这种,我们认为的简单指令对应到汇编可能很多条.执行在其中某一条汇编的时候可能就切换进程了.切换进程可能发生在用户态(虚拟内存的用户空间),也可能发生在内核态 ...