【动态闪烁红心图】

TWenYuan

已于 2023-02-08 09:54:04 修改

阅读量147

点赞数

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

于 2022-09-23 14:41:34 首次发布

本文链接：https://blog.csdn.net/TWenYuan/article/details/127010364

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

动态闪烁图

（这是一个无限次闪烁的红心，注意定位和animation使用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心（动图）</title>
    <style>
        .yuan {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: white;
            border-radius: 50%;
            position: relative;

        }

        .dinwei {
            width: 70px;
            height: 70px;
            /* background-color: rosybrown; */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -35px;
            margin-left: -35px;
            animation: dance 1.2s infinite;  //(动画名称 时间 次数：无限)
        }

        .kuang {
            width: 70px;
            height: 70px;
            /* border: 1px solid black; */
           position: relative;
           top: -18px;
           transform: rotate(-45deg);
        }

        .k1 {
            width: 45px;
            height: 45px;
            background-color: red;
            position: absolute;
            left: 0;
            bottom: 0;
            
        }
        .k2{
            width: 45px;
            height: 45px;
            background-color: rgb(255, 0, 0);
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;

        }
        .k3{
            width: 45px;
            height: 45px;
            background-color: rgb(255, 0, 0);
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 50%;
        }
        @keyframes dance{
            0%{
                transform: scale(1.2);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(1.2); 
            }

        }
    </style>


</head>

<body style="background-color: darkkhaki;">

    <div class="yuan">
        <!-- .dinwei用于定位爱心整体到外圆的距离 -->
        <div class="dinwei">
            <!-- .kuang用来绘制爱心,方便旋转 -->
            <div class="kuang">
                <div class="k1"></div>
                <div class="k2"></div>
                <div class="k3"></div>
            </div>

        </div>

    </div>


</body>

</html>