心跳动画

心跳动画

思路：
1.首先要设置出心形
心形可以由左右两颗半心组成，通过设置border-radius和旋转以达到心形效果。
2.让心形动起来

代码：
定义基础类

   	 .cq_animation{
        /* 默认执行所有动画名字 */
        animation: all;
        /* 默认每个动画执行时间 */
        animation-duration: 2s;
        /* 默认所有动均匀速执行 */
        animation-timing-function: linear;
    }
    /* 始终是否循环执行 */
    .infinite{
       animation-iteration-count: infinite;
      
    }

通过伪元素设置设置两颗版心

	#heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart::before,
    #heart::after
    {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        border-radius: 50px 50px 0 0;  //上右圆角设置为50%
        transform: rotate(-45deg);    //旋转角度
        transform-origin: 0 100%;     //设置绕着左下角旋转
    }
    #heart::after {
        left: 0;
        transform: rotate(45deg);  //将另半颗心反向于前半颗心旋转
        transform-origin: 100% 100%;  //设置绕着右下角旋转
    }

根据分析：在0%,50%,100%时候在原位置不动，在25%,75%时候将宽高拉伸

 	@keyframes hertBeat{
        0%,50%,100%{
            transform: scale(1);
        }
        25%,75%{
            transform: scale(1.3,1.3);  //将宽高拉伸
        }
    }
    .cq_hearBeat{
        animation-name: hertBeat;
    }

div部分

<div id="heart" class="cq_animation cq_hearBeat infinite"></div>

效果图：

来源：https://blog.csdn.net/qq_35396397/article/details/102721300