如何用HTML和CSS写一个跳动的爱心
作者：互联网
在建党一百周年的特殊日子里，写一个简单的爱心跳动表白女朋友吧。在这里我们利用css进行样式设置，其中还用了伪元素以及动画等多种元素的结合。
把爱心划为三个盒子的组合，通过改动盒子的位置实现爱心。在其中调用位置、宽、高、背景、旋转等多元素对盒子进行调整。设置好盒子样式后利用@keyframes对盒子进行动画设置，@keyframes后加设置动画的名称，方便我们在盒子的样式中调用动画
整个爱心完成的代码：
<!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>
<style>
div{
position:relative;
width: 100px;
height: 100px;
background-color:red;
margin: 100px auto;/*外边距 间距 100px：上下间距 auto：居中 */
transform: rotate(45deg) scale(0.8);
animation: change 1s infinite;/*绑定动画并设置时间*/
}
/*伪元素（：：）给元素添加新样式*/
div::before,
div::after{
position: absolute;/*绝对定位*/
content: "";
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%;
}
div::before{
left: -60px;
}
div::after{
top:-60px;
}
/*动画*/
@keyframes change{
0%{
transform:rotate(45deg) scale(1) ;
}
100%{
transform: scale(45deg) scale(0.8);
}
}
</style>
</head>
<body>
<div></div>
<table align="center"><tr><td><font color="pink">心动一下心动一夏一夏又一下</font></td></tr>
<tr><td><font color="pink">Heart beat, heart beat, summer beat</font></td></tr></table>
</body>
</html>
标签：动画,scale,盒子,100px,爱心,HTML,div,CSS 来源： https://blog.csdn.net/qq_52756999/article/details/118423804