CSS实现跳动的心脏

本文主要是介绍CSS实现跳动的心脏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天中午吃饭的时候在b站上边看了一个直播，教的是用CSS做出一个跳动的心脏，下午放学后，我自己试着写了出来，有兴趣的可以看下，有不足的地方感谢指导，下面直接附上源码。

HTML页面

/**  思路:*       1. 将心脏部分包含在一个盒子内.*       2. 在心脏盒子内准备两个小盒子,让小盒子浮动,在同一行显示.*       3. 给两个小盒子设置圆角边框.*       4. 让两个小盒子进行旋转和平移*       5. 给两个小盒子设置盒子阴影*       6. 给外边的心脏盒子添加放大和缩小动画*/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>爱心跳动</title><link rel="stylesheet" href="index.css">
</head>
<body>//将心脏包含在一个盒子内<div class="heart"><div class="left"></div><div class="right"></div></div>
</body>
</html>

CSS页面

body {margin: 0;padding: 0;background-color: #000;
}.heart {width: 300px;height: 300px;margin: 200px auto;/* 开始动画 名字 时间 循环 逆序 */animation: beat 1s infinite reverse;
}.left,
.right {float: left;width: 130px;height: 210px;background-color: #f2bbba;/* 两个盒子设置圆角边框 */border-radius: 75px 75px 0 0;/* 心脏阴影设置 */box-shadow: 0 0 55px #f2bbba;
}.left {/* 心脏盒子内两个盒子的平移和旋转 */transform: translate(50px) rotate(-45deg);
}.right {transform: translate(-23px) rotate(45deg);
}/* 制定动画 */
@keyframes beat {0% {transform: scale(1);}100% {/* 放大1.2倍 */transform: scale(1.2);}
}