前端小项目：爱心加载动画（HTML+CSS）

前端小项目：爱心加载动画（HTML+CSS）

引用

CSDN

1.

https://m.blog.csdn.net/qq_50221178/article/details/142645336

本文将通过一个简单的例子，介绍如何使用HTML和CSS实现一个爱心加载动画。通过这个实例，你将学习到如何使用伪元素构建爱心形状，以及如何通过关键帧动画实现跳动效果。

实现效果

技术实现

爱心加载动画主要依赖于HTML和CSS。HTML负责构建网页的结构，而CSS则用于美化界面和实现动画效果。

1. HTML结构

HTML部分非常简单，我们只需要一个div元素来承载动画：

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

2. CSS样式

定义变量

我们使用CSS的:root伪类来定义一些全局变量，包括爱心的颜色和动画的持续时间：

:root {
    --heart-color: #FF4D4D; /* 爱心颜色 */
    --animation-duration: 1s; /* 动画持续时间 */
}

爱心形状

爱心的实现依赖于::before和::after伪元素。这两个伪元素被用来构建爱心的上半部分。通过旋转和设置不同的transform-origin，我们可以得到爱心的典型形状：

.heart::before, .heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: var(--heart-color);
}
.heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

动画效果

动画效果由两个关键帧动画组成：heartbeat和blurEffect。heartbeat动画让爱心有跳动的效果，而blurEffect则让爱心在跳动过程中产生模糊效果，增加了视觉的丰富性：

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}
@keyframes blurEffect {
    0%, 100% {
        filter: blur(5px);
    }
    50% {
        filter: blur(0);
    }
}

源码获取

完整源码可以在以下链接获取：
源码下载

结论

通过这个简单的实例，我们可以看到，即使不使用JavaScript，我们也可以通过HTML和CSS实现有趣且富有表现力的动画效果。