月有阴晴圆缺，人有悲欢离合

结构

        <div id="app">
            <div class="love">
                <div class="love-left"></div>
                <div class="love-right"></div>
            </div>
            <div class="love">
                <div class="love-left"></div>
                <div class="love-right"></div>
            </div>
        </div>

样式

            * {margin: 0; padding: 0;}
            
            #app {
                width: 100vw;
                height: 100vh;
                background-color: skyblue;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                
                animation: changeColor 6s linear infinite alternate;
                position: relative;
            }
            
            
            .love {
                width: 180px;
                height: 140px;
                margin: 0 auto;
                display: flex;
            }
            
            /* 第一个爱心 */
            .love:nth-child(1) {
                position: absolute;
                top: 0;
                left: 0;
            }
            
            /* 第二个爱心 */
            .love:nth-child(2) {
                position: absolute;
                top: 0;
                left: 200px;
                
                animation: 6s move linear infinite alternate;
            }
            
            .love-left,
            .love-right{
                width: 80px;
                height: 120px;
                background-color: yellow;
                border-radius: 50px 50px 0 0;
            }
            
            /* 通过位移和旋转，拼接成爱心形状 */
            .love-left {
                transform: translateX(40px) rotate(-45deg);
            }
            
            .love-right {
                transform: translateX(-10px) rotate(45deg);
                
            }
            
            .love:nth-child(2) .love-left,
            .love:nth-child(2) .love-right {
                animation: changeColor 6s linear infinite alternate;
            }
            
            /* 移动动画 */
            @keyframes move{
                0%{
                    transform: translateX(0);
                }
                
                100% {
                    transform: translateX(-400px);
                }
            }
            
            /* 颜色渐变动画 */
            @keyframes changeColor{
                0%{
                    background-color: skyblue;
                }
                50% {
                    background-color: #111111;
                }
                100% {
                    background-color: skyblue;
                }
            }