CSS3 实现童年的纸飞机

下面我将详细讲解如何用CSS3实现童年的纸飞机。

简介

本篇攻略将带你了解如何使用CSS3来创造一个可爱的纸飞机。纸飞机用时髦的CSS3动画，可以飞翔在你的网页中。

实现步骤

创建HTML结构

首先，我们需要在HTML中创建一个容器div，它将包含我们的纸飞机。以下是HTML代码：

<div class="paper-plane">
  <div class="tail"></div>
  <div class="body">
    <div class="circle"></div>
    <div class="wing left"></div>
    <div class="wing right"></div>
  </div>
</div>

设置基本样式

接下来，我们将为我们的纸飞机设置基本的样式。以下是CSS代码：

.paper-plane {
  position: relative;  /* 相对定位 */
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 30px;
  border: 1px solid #ddd;
}

.paper-plane .tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #f5f5f5;
}

.paper-plane .body {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 40px;
  height: 30px;
  background: #f5f5f5;
  border-radius: 20px;
  transform: rotate(40deg);
  z-index: 1;
}

.paper-plane .circle {
  position: absolute;
  top: -10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: #d92525;
  border-radius: 50%;
  z-index: -1;
}

.paper-plane .wing {
  position: absolute;
  top: 10px;
  width: 40px;
  height: 10px;
  background: #fff;
  border: 1px solid #ddd;
  transform: rotate(-10deg);
}

.paper-plane .wing.left {
  left: -1px;
  transform-origin: right top;
}

.paper-plane .wing.right {
  right: -1px;
  transform-origin: left top;
}

我们为纸飞机设置相对定位，并为其设置了宽度，高度和背景颜色。我们还使用了border-radius属性来设置圆角。

然后，我们通过.absolute为纸飞机的两个部分（尾巴和身体）设置绝对定位，并使用transform旋转身体以使其看起来更像一个实际的纸飞机。尾巴也使用了border的技巧，使其看起来更像一个三角形。

对于机身，我们使用了z-index属性，以便后面的翅膀不会被遮盖，同时我们也增加了一个小圆形，使纸飞机看起来更加逼真。

接下来，我们给纸飞机的每个翅膀添加了绝对定位。翅膀也像机身进行了旋转，并通过transform-origin确定了旋转中心。我们还使用了一些基本的边框，以使翅膀看起来像真的纸。

完整的CSS样式如下：

/* 关键帧（keyframes） */
@keyframes fly {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(300px, -200px, 0) rotate(360deg); }
}

.paper-plane {
  position: relative;
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 30px;
  border: 1px solid #ddd;
  animation: fly 5s infinite;
}

.paper-plane .tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #f5f5f5;
}

.paper-plane .body {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 40px;
  height: 30px;
  background: #f5f5f5;
  border-radius: 20px;
  transform: rotate(40deg);
  z-index: 1;
}

.paper-plane .circle {
  position: absolute;
  top: -10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: #d92525;
  border-radius: 50%;
  z-index: -1;
}

.paper-plane .wing {
  position: absolute;
  top: 10px;
  width: 40px;
  height: 10px;
  background: #fff;
  border: 1px solid #ddd;
  transform: rotate(-10deg);
}

.paper-plane .wing.left {
  left: -1px;
  transform-origin: right top;
}

.paper-plane .wing.right {
  right: -1px;
  transform-origin: left top;
}

添加动画效果

我们使用CSS3规范的@keyframes为纸飞机添加平滑的飞行效果。

@keyframes fly {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(300px, -200px, 0) rotate(360deg); }
}

keyframes指令设置了一个过渡，其开始状态为transform属性的原始值，结束状态为其新的值。在这种情况下，我们使用translate3d将其从左上角移动到页面的右上角，并在此过程中进行旋转。动画时间为5秒，重复无限次。

如此我们就成功地创建了一个使用CSS3实现的可爱纸飞机！

示范

在以下两个示例中，分别使用了光晕和翻转两种特效展示了纸飞机飞行的过程，希望可以帮助你更好地了解如何实现这个效果：

代码1：

<div class="plane-container">
  <div class="paper-plane">
    <div class="tail"></div>
    <div class="body">
      <div class="circle"></div>
      <div class="wing left"></div>
      <div class="wing right"></div>
    </div>
  </div>
  <div class="shine"></div>
</div>

.plane-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.paper-plane {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 30px;
  border: 1px solid #ddd;
  animation: fly-slow 10s infinite;
}

.shine {
  position: absolute;
  top: -75px;
  left: -75px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #fff;
  opacity: .3;
  box-shadow: 0 0 25px 25px #fff;
  animation: halo 10s infinite;
}

@keyframes fly-slow {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-90deg) translate3d(250px, 100px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes halo {
  0% { opacity: .3; }
  50% { opacity: 1; }
  100% { opacity: .3; }
}

代码2：

<div class="plane-container">
  <div class="paper-plane flip">
    <div class="tail"></div>
    <div class="body flip-p">
      <div class="circle"></div>
      <div class="wing left"></div>
      <div class="wing right"></div>
    </div>
  </div>
</div>

.plane-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.paper-plane {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 30px;
  border: 1px solid #ddd;
  transform-origin: center center;
  animation: fly 10s infinite;
}

.paper-plane.flip .body {
  transform: rotateX(180deg);
}

.wing {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  position: absolute;
  top: 23px;
  width: 25px;
  height: 5px;
  border-radius: 5px;
}

.wing.left {
  transform: rotate(-25deg);
  left: -18px;
}

.wing.right {
  transform: rotate(25deg);
  right: -18px;
}

.tail {
  border-bottom: 20px solid #f5f5f5;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

@keyframes fly {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-25deg) scale(.8);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  75% {
    transform: rotate(25deg) scale(.8);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

这两个示例展示了如何通过添加光晕和翻转特效为纸飞机飞行增添一些装饰效果。

至此，这篇攻略的演示部分结束了。通过这篇文章，相信你已经掌握了如何使用CSS3来实现一个可爱的纸飞机，愿你在以后的开发工作中更上一层楼！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3 实现童年的纸飞机 - Python技术站

CSS3 实现童年的纸飞机

简介

实现步骤

示范

相关文章