思路：利用两个长方形(比例是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. PAT甲级题分类汇编——排序

    本文为PAT甲级分类汇编系列文章. 排序题,就是以排序算法为主的题.纯排序,用 std::sort 就能解决的那种,20分都算不上,只能放在乙级,甲级的排序题要么是排序的规则复杂,要么是排完序还要做点 ...

  2. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

  3. 怎么将visual studio项目打包生成dll文件

    1.打开电脑再打开visual studio软件,在软件里面新建一个项目,文件---->新建---->项目,打开新建项目窗口. 2.选择C#类工程,并为项目命名. 3.将类库文件class ...

  4. centos安装配置jdk

    本文以jdk8为例. 1.下载安装包 1.1.官网:https://www.oracle.com/technetwork/java/javase/downloads/index.html 1.2.登录 ...

  5. robot framework 的关键字Continue For Loop 用法

    Continue For Loop关键字就是python的continue的意思,跳出本层循环,继续执行下一个循环. 我先举个栗子: :FOR    ${index}    IN RANGE    5 ...

  6. 【转载】Response对象的作用以及常用方法属性

    Response对象是Asp.Net应用程序中非常重要的一个内置对象,其作用为负责将服务器执行好的信息输出给客户端,即作用主要为响应客户端请求并将服务器的响应返回给用户,在页面的临时跳转中,也可使用R ...

  7. springboot 常见的启动器

    <!--pringBoot提供了一个名为spring-boot-starter-parent的工程, 里面已经对各种常用依赖(并非全部)的版本进行了管理 我们的项目需要以这个项目为父工程,这样我 ...

  8. ubuntu下使用JNI Java调用C++的例子

    TestJNI.java public class TestJNI { static{ System.load("/home/buyizhiyou/workspace/JNI/src/lib ...

  9. 利用 pandas库读取excel表格数据

    利用 pandas库读取excel表格数据 初入IT行业,愿与大家一起学习,共同进步,有问题请指出!! 还在为数据读取而头疼呢,请看下方简洁介绍: 数据来源为国家统计局网站下载: 具体方法 代码: i ...

  10. 初始化springbean

    public class SMSMessageHandler implements InitializingBean { @Overridepublic void afterPropertiesSet ...