简单100行代码一页完成（表白代码-爱心跳动）

最新推荐文章于 2023-08-21 16:38:25 发布

代码强迫症的熊

最新推荐文章于 2023-08-21 16:38:25 发布

阅读量1k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/CKajax/article/details/127827071

版权

一、图片预览效果

二、开打你喜欢的编译工具，甚至文本工具都可以只需要完成后把文件格式改成html格式。

<!DOCTYPE html>
<html>

<head>

    <title>跳动爱心</title>

    <meta charset="UTF-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #background {
            position: relative;
            width: 520px;
            height: 500px;
            background: pink;
            margin: 90px auto;
        }

        .love {
            width: 300px;
            height: 300px;
            background: #d5083b;
            box-shadow: 0px 0px 40px -4px #d5083b;
        }

        .love-left {
            position: absolute;
            top: 0px;
            left: 0px;
            border-radius: 150px;
            /*渐变色 渐变开始位置、渐变开始颜色、渐变结束颜色*/
            background: linear-gradient(to left right, #ee0a44 0%, #d5083b 40%);
            /*box-shadow:-15px -13px 40px -4px #d5083b;*/
            /*box-shadow:0px 0px 40px -4px #d5083b;*/
            /*background:red;*/
            transform: scale(1);
            animation: heart-beat 0.6s ease infinite;
            z-index: 3;
        }

        .love-right {
            position: absolute;
            top: 0px;
            right: 0px;
            border-radius: 150px;
            background: linear-gradient(to right left, #ee0a44 0%, #d5083b 50%);
            /*background:red;*/
            transform: scale(1);
            animation: heart-beat 0.6s ease infinite;
            z-index: 2;
        }

        .love-bottom {
            position: absolute;
            top: 109px;
            left: 110px;
            transform: rotate(45deg) scale(1);
            background: linear-gradient(to left top, #ee0a44 0%, #d5083b 40%);
            /*background:red;*/
            animation: heart-beat 0.6s ease infinite;
            z-index: 1;
        }

        @keyframes heart-beat {
            0% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0px 0px 40px -4px #d5083b;
            }

            50% {
                transform: rotate(45deg) scale(1.1);
                box-shadow: 5px 5px 40px 10px #d5083b;
            }

            100% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0px 0px 40px -4px #d5083b;
            }
        }
    </style>
</head>

<body style=" background: pink">
    <div id="background">
        <div class="love love-left"></div>

        <div class="love love-right"></div>

        <div class="love love-bottom"></div>

    </div>

</body>
</html>