制作一颗跳动的心

1.1第一步准备 一个父级盒子 两个子级盒子

<div class="father">
        <div></div>
        <div></div>
    </div>

1.2 给.father盒子设置宽高 背景色 margin:400px auto; transform: rotate(45deg);

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 200px;
            height: 200px;
            margin: 400px auto;
            transform: rotate(45deg);
            background-color: #ff0;
        }
    </style>

1.3给父级盒子里面的两个div设置 宽高100% border-radius: 50%;

 .father div{
            width: 100%;
            height: 100%;
            border-radius: 50%;
 }

1.4给两个子级盒子分别设置不同的背景(后面再把背景颜色设置相同颜色)

 .father div:first-child {
            background-color: #f00;
        }
        
        .father div:last-child {
            background-color: #00f;
        }

1.5父相子绝 给父级盒子设置相对定位 给父级盒子里面的div 设置绝对定位

    .father {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 400px auto;
            transform: rotate(45deg);
            background-color: #f00;
        } 
        .father div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

1.6给父级盒子里面的第一个盒子设置 沿着X轴位移 transform: translateX(-90px); 给父级盒子里面的第二个盒子设置 沿着Y轴位移 transform: translateX(-90px); 再把所以的背景颜色更改为#f00

.father div:first-child {
            background-color: #f00;
            transform: translateX(-90px);
        }
        
        .father div:last-child {
            background-color: #f00;
            transform: translateY(-90px);
        }

2.1定义名为LOVE form初始状态就不写 直接写to {transform: rotate(45deg) scale(2)}

 @keyframes love{
            to{
                transform: rotate(45deg) scale(2);
            }
        }

2.2调用动画 给.father设置 animation: love 6s linear infinite alternate;

  .father {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 400px auto;
            transform: rotate(45deg);
            background-color: #f00;
            animation: love 6s linear infinite alternate;
        }

一颗跳动的心就这么简单的完成~~