产品经理找我要用 div 画条龙，这算什么事？

前端

2023-10-30 15:33:55

使用CSS3绘制心愿墙上的龙：一次艰辛的旅程

前言

我们经常面临挑战，将看似不可能的任务变为现实。在软件开发领域，这样的挑战更是司空见惯。我最近就遇到了一个看似不可能的任务：使用CSS3绘制一条龙。这篇文章将带你踏上我的旅程，从最初的怀疑到最终的成功。

任务简介

我的任务是创建心愿墙，用户可以在墙上写下愿望。产品经理要求在墙上添加一条龙，作为心愿实现过程中的视觉元素。他们告诉我，龙应该是用div绘制的，而不是使用图像或SVG。

挑战

起初，我被这个要求吓坏了。用div绘制一条龙？这怎么可能呢？CSS3虽然功能强大，但用它绘制复杂的形状，比如龙，似乎并不合适。我怀疑自己是否能完成这项任务。

克服障碍

尽管犹豫不决，我还是决定接受挑战。我首先研究了CSS3中的各种形状和动画属性。我发现我可以使用圆形和路径来创建龙的身体和翅膀，并使用过渡和关键帧来为其添加动画。

绘画过程

我开始了绘画之旅，一次绘制一个元素。我从龙的身体开始，使用圆形来创建头部、躯干和尾巴。然后，我使用路径创建龙的翅膀，并在其上添加了渐变效果。

接下来的步骤是最具挑战性的——为龙添加动画。我使用过渡和关键帧让龙的身体上下移动，翅膀拍打。这个过程耗时费力，但我决心让龙栩栩如生。

最终成果

经过数小时的努力，我终于完成了我用div绘制的龙。它虽然不是完美的，但它可以移动，而且相当逼真。我把它交给了产品经理，他们非常满意。

收获

虽然绘制龙的过程很困难，但我从中收获颇丰。我学到了如何利用CSS3创建复杂的形状和动画。我还学会了如何克服困难，并相信自己的能力。

CSS3代码示例

/* 龙的身躯 */
.dragon-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 300px;
  border-radius: 50%;
  background-color: #000;
}

/* 龙的头 */
.dragon-head {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0;
}

/* 龙的躯干 */
.dragon-trunk {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #00f;
}

/* 龙的尾巴 */
.dragon-tail {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #0ff;
}

/* 龙的翅膀 */
.dragon-wings {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background-color: #f00;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: rotate(-45deg);
}

/* 龙的动画 */
.dragon-body {
  animation: move-up-down 2s infinite alternate;
}

@keyframes move-up-down {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}

.dragon-wings {
  animation: flap 2s infinite alternate;
}

@keyframes flap {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}