页面效果（2）--绘制跳动的♥-CSDN博客

本文链接：https://blog.csdn.net/2401_83913283/article/details/141058744

效果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 设置元素充满整个页面 */
            margin: 0;
            padding: 0;
        }
        html,body{
            /* 宽高占满屏幕 */
            width: 100%;
            height: 100%;
        }
        body{
            /* 设置背景颜色 */
            background-color: plum;
            /* 该元素设置弹性盒子 */
            display: flex;
            /* 调整摆放位置 */
            flex-direction: row;
            /* 水平垂直居中 */
            align-items: center;
            justify-content: center;
            
        }
        .heart{
            /* 实现一个正方形 */
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置相对定位，使后面的形状随父元素移动 */
            position: relative;
            /* 顺时针旋转45度 */
            transform: rotate(45deg);
            /* 实现动画效果 */
            animation:heartbit 0.5s alternate infinite;
            /* 设置阴影效果 */
            box-shadow:0 0 80px rgb(236, 51, 178) ;
        }
        .heart::before{
            /* 设置一个伪元素在这里添加半圆 */
            content: "";
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 设置定位后元素显示 */
            position: absolute;
            left: 0;
            top: -99px;
            /* 设置圆角效果 */
            border-radius: 100px 100px 0 0;
        }
        .heart::after{
            /* 设置一个伪元素在这里添加另一个半圆 */
            content: "";
            width: 100px;
            height: 200px;
            background-color:pink;
            /* 设置定位后元素显示 */
            position: absolute;
            left: -99px;
            top: 0px;
            /* 设置圆角效果 */
            border-radius: 100px 0px 0px 100px;
        }
        /* 设置动画，让心跳动起来 */
        @keyframes heartbit {
            0%{
                /* 当开始时缩放为当前大小的0.6倍 */
                transform: rotate(45deg) scale(0.6);
            }
            /* 25%{
                transform: rotate(45deg) scale(0.8);
            }
            50%{
                transform: rotate(45deg) scale(1);
            }
            75%{
                transform: rotate(45deg) scale(1.2);
            } */
            100%{
                transform: rotate(45deg);scale: (1.4);
            }
        }
        h2{
            font-size: 10em;
            position: absolute;
            top: 200px;
            color: purple;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
    <h2>LOVE YOU</h2>
</body>
</html>