01-HTML+CSS+JS 案例【一】闪动的小红心为了帮助更多新手小白，对html,css,js，能够熟练掌握与应用,

前言:为了帮助更多新手小白，对html,css,js，能够熟练掌握与应用，我将不定期发布相关案例，供大家学习参考，希望也能和各位热爱前端的大佬们一起交流学习，共同成长。

在这个案例中，我们将学习如何使用 HTML、CSS 和 JavaScript 创建一个闪动的小红心。这个小红心可以发给你喜欢的人，或者作为一个可爱的装饰品。我们将使用 HTML 来创建基本的结构，CSS 来设计样式和动画效果。通过这个案例，你将学到如何使用 CSS3 的动画效果来创建各种各样的动态效果，让我们开始吧！

一、效果演示

二、HTML源码

    <body>
        <div class="box">
            <div class="love left"></div>
            <div class="love center "></div>
            <div class="love right"></div>
        </div>
    </body>

二、CSS源码

    body {
        background-color: #ffa5a5;
    }

    .box {
        width: 200px;
        height: 200px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: 5s love infinite;
    }

    .love {
        width: 200px;
        height: 200px;
        background-color: #d5093c;
        box-shadow: 0px 0px 70px #D5093C;
    }

    .left {
        border-radius: 50%;
        position: absolute;
        top: -76px;
        left: 76px;
    }

    .center {
        transform: rotate(45deg);
    }

    .right {
        border-radius: 50%;
        position: absolute;
        top: -76px;
        left: -76px;
    }

    @keyframes love {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(2);
        }

        100% {
            transform: scale(1);
        }
    }

四、源码解析

1.css居中的方式

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2.css动画的定义

.div {
  width: 300px;
  height: 300px;
  background-color: aqua;
  border-radius: 50%;
  /* 应用动画 */
  animation-name: div_animate;
  /* 指定动画名称 */
  animation-duration: 5s;
  /* 动画持续时间 */
  animation-fill-mode: forwards;
  /* 动画填充模式，forwards把动画停在最后一个 */
  animation-delay: -2s;
  /* 动画延迟时间  当值为负数时动画已经开始了多长时间*/
}
/* 定义的动画规则 */
    
@keyframes div_animate {
  /* 第一种 */
  from {
     background-color: aqua;
  }
  to {
     background-color: #000;
  } 

  /* 第二种 */
  25% {
     background-color: yellow;
  }
  50% {
     background-color: aqua;
  }
  100% {
      background-color: #000;
  }
}