CSS基础-animation练习-跳动的红心

效果演示

html代码

css代码

.div01 {
            margin: 150px;
            width: 200px;
            height: 160px;
            position: relative;
            animation: run 2s infinite;
        }
        
        .div01::before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            display: block;
            width: 100px;
            height: 160px;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform-origin: right bottom;
            transform: rotate(45deg);
        }
        
        .div01::after {
            position: absolute;
            right: 0;
            top: 0;
            content: '';
            display: block;
            width: 100px;
            height: 160px;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform-origin: left bottom;
            transform: rotate(-45deg);
        }
        
        @keyframes run {
            0% {
                transform: scale(0.5) translateY(0px);
            }
            5% {
                transform: scale(0.5) translateY(-10px);
            }
            10% {
                transform: scale(0.6) translateY(0px);
            }
            15% {
                transform: scale(0.6) translateY(-50px);
            }
            30% {
                transform: scale(1.1);
            }
            40% {
                transform: scale(0.6);
            }
            70% {
                transform: scale(1.2);
            }
            92% {
                transform: scale(0.7);
            }
            100% {
                transform: scale(1);
            }
        }