前端小项目-----爱心加载动画（html+css)

平凡的思想

于 2024-09-29 22:47:33 发布

阅读量192

点赞数 3

文章标签：前端 html css

本文链接：https://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，我们可以得到爱心的典型形状。
css

.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则让爱心在跳动过程中产生模糊效果，增加了视觉的丰富性。
css

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes blurEffect {
    0%, 100% {
        filter: blur(5px);
    }
    50% {
        filter: blur(0);
    }
}