心跳（纯代码制作心形，animation动画）
2024-08-27 11:54:57
思路：利用两个长方形(比例是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
最新文章
- 在多线程编程中lock（string）{...}隐藏的机关
- oracle遍历表更新另一个表（一对多）
- Windows Phone 五、配置存储
- $.ajax请求返回数据中status为200，回调的却是error?
- NSDate NSString相互转化
- 后台运行程序screen or nohup
- 你有没有试过“闭上眼”使用：京东、滴滴、QQ、支付宝？
- C语言的指针变量
- CMD修改IP地址
- 新版MySql 5.6.20，安装后无法登陆的解决办法
- 4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射（
- js的关于for的语句
- log4net使用中loginfo.IsInfoEnabled=false问题解决方法
- 随机生成游戏用户昵称（nodejs版本）（含机器人头像，金币等）
- cookie是如何保存到客户端，又是如何发送到服务端
- JS控制文本框只能输入数字 \保留小数点后两位
- php调用c#的dll（转）
- GOIP connects with Elastix through “config by line”
- Delphi中Form的position属性与代码自定义窗体位置
- Java：双向链表反转实现