心跳（纯代码制作心形，animation动画）
思路：利用两个长方形(比例是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动画）的更多相关文章
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- [deviceone开发]-心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...
- [deviceone开发]-直播APP心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- css3动画特效：纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer
欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...
- qt 5 小练习 纯代码制作自定义按钮
大家都知道QT设计师中直接拖动的按钮是长方形带有圆角的图案,那我们如何来设置自定义按钮呢 要设计一个按钮,我们必须要知道按钮有什么属性,首先,按钮必须有一个位置 第二,按钮必须有一个名称.还有当我们点 ...
- Python 一行代码输出心形图案
Python3 >>> print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0. ...
- android Animation动画的xml使用
在Android应用程序,使用动画效果,能带给用户更好的感觉,做动画能够通过XML或Android代码来实现. Animation动画效果的实现能够通过两种方式进行实现,一种是tweened anim ...
随机推荐
- react实现提示消息容器，可以动态添加，删除内部子提示消息
import React, { useState, useRef, useEffect } from 'react' import PropTypes from 'prop-types' import ...
- drbd+nfs+keepalived
写的很详细 理论知识: https://www.cnblogs.com/kevingrace/p/5740940.html 写的很详细 负载: https://www.cnblogs.com/kevi ...
- GRIT VIEW删除事件
1.点选表格后找到事件 RowCommand 2.輸入gvGroupUser_RowCommand后双击 ------注分 ...
- jdk1.8 接口default方法
jdk1.8 版本新增了一些特性,与之前版本差异相对.若不清楚地话,在使用过程中会产生很大的疑问. 本次介绍的是interface接口中方法的特殊性. 在以前jdk版本在接口中是只允许定义方法方法名, ...
- 如何理解H264 编码
H264 结构 https://blog.csdn.net/andywang201001/article/details/80274886 H264 源码 https://www.cnblogs.c ...
- display的属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.,display这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型, ...
- idea中异常处理快捷键
键盘按下 alt+Enter 一般选择try/catch这一个
- iOS开发-NSArray
忙了一上午,解决了几个bug,现在终于抽出来一点时间喝点水休息下, 想着系列这么浩大的一个工程,才刚刚开始写,不能断了,就跟写小说一样,既然是系列,那么就需要不停更... 好吧. 简单的说说iOS开发 ...
- 只需五分钟-用Maven快速搭建Spring Cloud微服务
Maven安装手册 1.准备安装包 安装包: apache-maven-3.5.4-bin.zip (最好JDK 1.7及以上版本) 集成包: eclipse-maven3-plugin.zip 2 ...
- elasticsearch，kibana 坑之 开启外网访问
安装elasticsearch,kibana,开启外网访问,总是失败,坑啊. 经过两天断断续续的艰苦奋战,终于搞定了,记录如下: kibana开启外网访问 1) 修改server.host 为本机i ...