如何用css让昨天画的爱心动起来？

写前端的小北
285 阅读2分钟

这是我参与「4月日新计划更文活动」的第16天。

我们今天讲一下如何用css让昨天画的爱心跳动起来。

先来分析一下这个功能怎么实现哈。

其实本质上就是在昨天爱心的基础上加上一个animation动画，让这个爱心一直呈现忽大忽小的动态变化。

如果有不太清楚animation动画的朋友可以提前预习一下这一部分的知识点。

那话不多说，我们直接开始讲解这块的内容吧。

因为是动画效果，就不太好直接截图看到效果了，等会就直接上代码，大家直接运行代码就好了。

我说一下思路哈。

1、使用animation的css属性设置一个keyframe，用来展示整个动画动作的方法。

2、设置动画轨迹。如0%时候的属性变化，100%时候的属性变化等等。

3、给动画设置循环。

话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画一个表白爱心</title>
  </head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      animation: loveFn 1s infinite alternate;
    }
    .box {
      position:relative;
      top: 100px;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: pink;
      transform: rotate(-45deg);
    }

    @keyframes loveFn{
      0%{
          transform: scale(1);
      }
      80%{
          transform: scale(0.);
      }
      100%{
          transform: scale(1.1);
      }
    }

    .box:before {
      content: "";
      position:absolute;
      top: -50px;
      left: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: pink;
    }
    .box:after{
      content: "";
      position: absolute;
      top: 0px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
    }

  </style>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

刚开始写这个效果的时候本来不打算在外层包裹一层container的元素，但是写到后面的时候发现animation属性和transform属性不能作用于同一个元素上。

所以就必须把这两个属性通过两个元素的方式分离开来。

给外层的container元素设置animation动画。

给内层的box设置transform的旋转。

这样就能看到一个爱心在你眼前布灵布灵的跳动起来了。

赶紧把这块的代码复制粘贴在你的电脑上，送给你的女朋友吧，她一定会开心的想要嫁给你。

以上就是我今天学习的如何用css让爱心跳动起来的知识点。

看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。

avatar
文章
阅读
粉丝