HTML5+CSS3实例：实现爱心加载特效

最新推荐文章于 2024-05-11 15:14:51 发布

xlyyy_

最新推荐文章于 2024-05-11 15:14:51 发布

阅读量226

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_48043684/article/details/129825015

版权

使用html+css代码实现爱心加载效果，效果如下图所示

在这里插入图片描述

html代码部分

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

css代码部分

.heart{
    width: 280px;
    height: 220px;
    display: flex;
    justify-content: space-between;
}
.heart span{
    /* 自定义属性值 */
    --c:plum;
    --h:50%;
    --t:25%;
    /* var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用 */
    background-color: var(--c);
    width: 20px;
    border-radius: 10px;
    position: relative;
    height: var(--h);
    top: var(--t);
    /* 执行动画 infinite是无限次播放 */
    animation: beating 3s infinite;
}
.heart span:nth-child(1),
.heart span:nth-child(9){
    --c:lightcoral;
    --h:60px;
    --t:44px;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
    --c:lightskyblue;
    --h:120px;
    --t:12px;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
    --c:lightgreen;
    --h:160px;
    --t:0;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
    --c:gold;
    --h:180px;
    --t:16px;
}
.heart span:nth-child(5){
    --c:plum;
    --h:188px;
    --t:32px;
}

/* 接下来我们定义动画 */
@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);
    }
}