跳动的心

HTML代码

<div class="item">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="square"></div>
    </div>

CSS代码

   body{background-color: violet;}
        .item{
            margin: 80px auto;
            width: 500px;height: 500px;
            position: relative;
            animation-name: jumpping;
            animation-duration: 0.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .item .circle1{
            width: 200px;height: 200px;
            background-color: red;
            border-radius: 50%;
            position: absolute;left:50px;top: 50px;
        }
        .item .circle2{
            width: 200px;height: 200px;
            background-color: red;
            border-radius: 50%;
            position: absolute;left: 150px;top: 50px;
        }
        .item .square{
            width: 180px;height: 180px;
            background-color: red;
            transform: rotate(45deg);
            position: absolute;left:110px ;top: 124px;
        }
        @keyframes jumpping{
            from{transform:scale(1)}
            to{transform:scale(1.2)}
        }