<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background: black;
}
.heart {
margin: 100px auto;
width: 200px;
height: 200px;
/* border: 1px solid #0094ff; */
position: relative;
animation-name: shake;
animation-duration: .5s;
animation-iteration-count: infinite;
}
.heart div {
/* border: 1px solid #0094ff; */
width: 100%;
height: 100%;
position: absolute;
background: pink;
animation-name: shadow;
animation-duration: .5s;
animation-iteration-count: infinite;
}
.topLeft,
.topRight {
border-radius: 100px 100px 0 0;
}
.topLeft {
transform: translate(-50px, 0) rotate(-45deg);
}
.topRight {
transform: translate(50px, 0) rotate(45deg);
}
.bottom {
transform: translate(0, 64px) rotate(45deg) scale(.9, .9);
}
/* 定义动画 */
@keyframes shake {
from {
transform: scale(.9, .9);
}
to {
transform: scale(1.1, 1.1);
}
}
@keyframes shadow {
from {}
to {
box-shadow: 0px 0px 50px pink;
}
}
</style>
</head>
<body>
<div class="heart">
<div class='topLeft'></div>
<div class='topRight'></div>
<div class='bottom'></div>
</div>
</body>
</html>
