HTML+CSS:小爱心动画

跟着up主码小渣学习（有不少的改动）
动画效果：

CSS代码如下：

*{
    margin: 0;
    padding: 0;
}
.love-wrap{
    width: 100%;
    height: 800px;
    background-color:  #ffb5c5;;
    animation: bo 4s ease infinite;
    transition: all 1s ease;
    overflow: hidden;
}
@keyframes bo {
    
    70%{
        background-color:#fff;
    }
}

.love {
    width: 200px;
    height: 200px;
    background-color: #F781BE ;
    margin: 200px auto;
    position :relative;
    transform: rotate(45deg);
    animation: mid 4s ease infinite;
    transition: all 1s ease;
}
.love::before {
    content: '';
    width: 200px;
    height: 200px;
    background-color: #F781BE;
     border-radius: 50%;
    position: absolute;
    top:-100px;
    left: 0px;
    animation: left 4s ease infinite;
    transition: all 1s ease;

}
.love::after {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top:0;
    left: -100px;
    background-color: #F781BE;
    border-radius: 50%;
    animation: right 4s ease infinite;
    transition: all 1s ease;
}
@keyframes right {
    0%{
        transform: rotate(0deg);
        background-color: #fff0f5;
    }
    30%{
        transform: rotate(45deg);
    }
    50%{
        background-color:#ffb5c5;
    }
    70% {
        transform: rotate(45deg);
        background-color:#ff6eb4;
    }
    100% {
        background-color:#fff;
        transform: rotate(90deg);
    }
}
@keyframes left {
    0%{
        background-color: #fff0f5;
        transform: rotate(0deg);
    }
    30%{
       transform: rotate(45deg);
    }
    50%{
        background-color:#ffb5c5;
    }
    70% {
        background-color:#ff6eb4; 
        transform: rotate(45deg);
    }
    100% {
        background-color:#fff;
        transform: rotate(90deg);
    }
}
@keyframes mid {
    0%{
        background-color: #fff0f5;
        transform: rotate(0deg);
    }
    30%{
      
       transform: rotate(45deg);
    }
    50%{
        background-color:#ffb5c5;
    }
        
    70% {
        background-color:#ff6eb4; 
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(90deg);
        background-color:#fff;
    }
}