唠嗑唠嗑

首先，不得不感慨一下掘金的活动是真的多呀，薅不完的羊毛，写不完的代码，学不完的知识。这不，为了参加这个活动，我又可以了。突发奇想，想写一个纸飞机飞向远方的效果，怀念一下小时候拿报纸折纸飞机的快乐，感觉似乎又回到那个时候了，除了回忆，通过写这个代码还让又一次捡起许久不用的 CSS3，其中的一些知识我觉得还是挺有用的，这也算是我的一些小趣味吧。

码上掘金

先来看看最终的效果吧。 code.juejin.cn/pen/7088113…

代码详解

其实呢，实现这个小特效并不难，既然主题是纸飞机，那么我们就需要想象一下纸飞机的样子，我想到的是用两个三角形进行拼接不就是纸飞机吗。那么接下来重点就是要怎么才能实现这两个三角形，我想到的是用两个长方形进行变形成为三角形，然后再调整它们的位置、旋转角度等来达到最终效果，代码如下：

HTML代码

创建两个 div 标签 one 和 two 来实现两个三角形，并将它们整体包裹在 air 中，形成一个纸飞机。

<div class="air">
  <div class="one"></div>
  <div class="two two-single"></div>
</div>

CSS代码

主要是通过 CSS3 来实现两个三角以及拼接成纸飞机。

  .air{
    width: 65px;
    height: 115px;
    position: absolute;
    bottom: 10px;
    left: 25px;
  }

  .one,.two{
    float: left;
    width: 30px;
    height: 115px;
    background: conic-gradient(from 120deg at 0 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
  }

  .two-single{
    transform: rotateY(180deg);
  }

效果如下：

动画特效

可以看出，纸飞机已经有了，现在我要赋予它灵魂，让它动起来，分别创建 myfirst 和 myfirst1 动画，然后再分别在 .air 和 .one,.two 中引用。

动画代码

 @keyframes myfirst{
    from {
      bottom: 10px;
      left: 25px;
      transform: rotate(-125deg) translateY(0px);
    }
    to {
      right: 25px;
      top: 10px;
      transform: rotate(-125deg) translateY(1700px);
    }
  }

  @keyframes myfirst1{
    from {
      width: 30px;
      height: 115px;
    }
    to {
      width: 3px;
      height: 11.5px;
    }
  }

引用代码

  .air{
    transform: rotate(-125deg) translateY(0px);
    transform-origin: center center;
    animation: myfirst 8s ease infinite;
  }

  .one,.two{
    transform-origin: center center;
    animation: myfirst1 8s ease infinite;
  }

到此，纸飞机代码就完成了，纸飞机从左下角向右上角移动，移动过程中，纸飞机逐渐变小，表示纸飞机载着我的回忆由近飞至远方，直至世界的尽头。O(∩_∩)O

飞向远方的纸飞机，载着我满满的回忆，哈哈哈哈