初级篇：如何用CSS3制作爱心加载「代码详解」

1.引言

CSS3作为CSS的升级版，拥有很多新的特性。在这篇文章里，我们将学习如何用CSS3制作一个可爱的爱心加载动画。

2.实现过程

2.1 HTML结构

我们首先需要在HTML中添加一个<div>元素作为容器，并在其中添加两个<div>元素作为爱心的两个部分。代码如下：

<div class="heart">

  <div class="heart-piece1"></div>
  <div class="heart-piece2"></div>
</div>

其中，class名字可以自行命名。

2.2 爱心形状

我们要使用CSS3的border-radius属性来制作爱心形状。代码如下：

.heart-piece1,.heart-piece2 {

   width:60px;
   height:60px;
   background-color:#f00;
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   border-radius:50%;
   position:absolute;
   top:0;
   left:23px;
}
.heart-piece1 {
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   transform:rotate(45deg);
}
.heart-piece2 {
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   transform:rotate(-45deg);
}

在这段代码中，我们使用了CSS3的transform属性来实现旋转的效果，并且使用了CSS3的border-radius属性来制作圆角，从而实现了爱心的形状。

2.3 动画

接下来，我们需要为爱心添加动画效果。我们要使用CSS3的animation属性来实现。代码如下：

.heart-piece1,.heart-piece2 {

    animation:move 1s ease-in-out infinite;
}
@keyframes move {
    0%{opacity:1; transform:translateY(0);}
    100%{opacity:0; transform:translateY(60px);}
}

在这段代码中，我们使用了CSS3的@keyframes规则来指定动画效果。我们定义了一个名为move的动画，该动画包含两个关键帧（0%和100%）。在起始位置（0%）时候，爱心的透明度为1，位于原始位置；在结束位置（100%）时，爱心的透明度为0，位于其原始位置下方。

3.完整代码

最后，我们将所有的CSS代码组合成一个整体，如下：

.heart {

   position: relative;
   width: 86px;
   height: 75px;
   margin: 0 auto;
}
.heart-piece1,.heart-piece2 {
    width:60px;
    height:60px;
    background-color:#f00;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position:absolute;
    top:0;
    left:23px;
    animation:move 1s ease-in-out infinite;
}
.heart-piece1 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.heart-piece2 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@keyframes move {
    0%{opacity:1; transform:translateY(0);}
    100%{opacity:0; transform:translateY(60px);}
}

并且在HTML中添加如下代码：

<div class="heart">

  <div class="heart-piece1"></div>
  <div class="heart-piece2"></div>
</div>

4.总结

通过这篇文章，我们学习了如何使用CSS3的border-radius属性和transform属性制作一个可爱的爱心形状，并且使用@keyframes规则和animation属性为其添加了动画效果。

这项技能对于动态效果的制作很有帮助，值得我们学习掌握。