爱心跳动样式

最新推荐文章于 2024-07-11 17:28:05 发布

码记大虾

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量123

点赞数 1

分类专栏： # web笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_74622880/article/details/139871605

版权

web笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心跳动加载</title>
    <link rel="stylesheet" href="./06-跳动爱心加载.css">
</head>

<body>
    <div class="heart">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

CSS

body {
    margin: 0;
    /* 设置页面外边距为0 */
    height: 100vh;
    /* 设置高度为视口高度 */
    display: flex;
    /* 使用弹性盒子布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    background: radial-gradient(circle at center, mediumpurple, #000);
    /* 设置背景为径向渐变 */
}

/* 这段代码定义了页面的样式。它的外边距被设置为0。它的高度是100vh，即占据整个视口的高度。
它使用了flex布局，将内容垂直和水平居中。它的背景是一个径向渐变，从中心开始，颜色分别是mediumpurple和#000。 */

.heart {
    width: 280px;
    /* 设置心形容器宽度 */
    height: 220px;
    /* 设置心形容器高度 */
    display: flex;
    /* 使用弹性盒子布局 */
    justify-content: space-between;
    /* 项目之间平均分布 */
}

/* 定义了一个名为.heart的类，用于创建一个心形图案。它的宽度是280像素，高度是220像素。它使用了flex布局，将内容水平排列，并在它们之间留出空白。 */

.heart span {
    --c: plum;
    /* 定义变量--c为plum */
    --h: 50%;
    /* 定义变量--h为50% */
    --t: 25%;
    /* 定义变量--t为25% */
    background-color: var(--c);
    /* 使用变量--c设置背景颜色 */
    width: 20px;
    /* 设置宽度为20px */
    border-radius: 10px;
    /* 设置圆角半径为10px */
    position: relative;
    /* 相对定位 */
    height: var(--h);
    /* 使用变量--h设置高度 */
    top: var(--t);
    /* 使用变量--t设置顶部偏移 */
    animation: beating 1s infinite;
    /* 应用名为beating的动画，持续时间1秒，无限循环 */
}

/* 定义了.heart中的每个元素，用于创建心形图案的每个部分。它的背景颜色是plum，使用了CSS变量。它的宽度是20像素，高度是CSS变量--h的值。它的边框半径是10像素，使它呈现圆形。它的定位方式是相对定位，使它的伪元素可以相对于它定位。它的顶部位置是CSS变量--t的值。它使用了beating动画，使它在不断跳动。 */

.heart span:nth-child(1),
.heart span:nth-child(9) {
    --c: lightcoral;
    /* 定义变量--c为lightcoral */
    --h: 60px;
    /* 定义变量--h为60px */
    --t: 44px;
    /* 定义变量--t为44px */
}


.heart span:nth-child(2),
.heart span:nth-child(8) {
    --c: lightskyblue;
    /* 定义变量--c为lightskyblue */
    --h: 120px;
    /* 定义变量--h为120px */
    --t: 12px;
    /* 定义变量--t为12px */
}

.heart span:nth-child(3),
.heart span:nth-child(7) {
    --c: lightgreen;
    /* 定义变量--c为lightgreen */
    --h: 160px;
    /* 定义变量--h为160px */
    --t: 0;
    /* 定义变量--t为0 */
}

.heart span:nth-child(4),
.heart span:nth-child(6) {
    --c: gold;
    /* 定义变量--c为gold */
    --h: 180px;
    /* 定义变量--h为180px */
    --t: 16px;
    /* 定义变量--t为16px */
}

.heart span:nth-child(5) {
    --c: plum;
    /* 定义变量--c为plum */
    --h: 188px;
    /* 定义变量--h为188px */
    --t: 32px;
    /* 定义变量--t为32px */
}

/* 定义了每个心形图案部分的颜色和位置。它使用了:nth-child()伪类，表示每个元素的位置。每个元素使用了不同的颜色和位置，使它们组合成一个心形图案。 */

@keyframes beating {

    0%,
    30% {
        height: var(--h);
        top: var(--t);
        background-color: var(--c);
        filter: blur(0);
    }

    60%,
    70% {
        height: 50%;
        top: 25%;
        background-color: plum;
        filter: blur(5px);
    }
}

/* 定义了beating动画，用于让心形图案的每个部分跳动。它使用了@keyframes规则，定义了动画的关键帧。在0%到30%的时间内，每个部分的高度和顶部位置都是初始值，背景颜色是CSS变量--c的值，没有模糊效果。在60%到70%的时间内，每个部分的高度和顶部位置都变成了50%和25%，背景颜色变成了plum，同时添加了模糊效果。 */

运行结果：