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

最新推荐文章于 2024-05-11 20:27:16 发布

前端=>小脑虎

最新推荐文章于 2024-05-11 20:27:16 发布

阅读量392

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/student66666666/article/details/123861385

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

效果演示

在这里插入图片描述

html代码

<div class="div01"> </div>

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);
            }
        }