css动画设置运动轨迹

CSS化向日葵

向日葵是我们生活中常见的一种花卉，它的形状鲜明、美丽，为许多人所喜爱。在这里，我们将向日葵的形态和美丽，用CSS来呈现，让您领略到全新的美丽风景。

首先我们来看看向日葵的形态，它有长长的葱绿色茎干，顶部有一个巨大的黄色花蕾。因此在CSS中，我们需要用到伪元素::before和::after来塑造向日葵的形态。

.sunflower {
  position: relative;
  margin-top: 50px;
  height: 300px;
  width: 80px;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(to bottom,#7A2E3D,#E5BE32);
}
.sunflower::before {
  position: absolute;
  content: "";
  top: -60px;
  left: -60px;
  border-radius: 50%;
  height: 160px;
  width: 160px;
  background-color: #F2CF63;
}
.sunflower::after {
  position: absolute;
  content: "";
  top: -55px;
  left: -55px;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  background-color: #FFF;
}

上面的代码片段中，.sunflower为向日葵最外层的容器，我们用线性渐变实现了向日葵茎干的颜色渐变效果。然后我们利用伪元素::before和::after分别塑造出向日葵的花蕾和花盘，通过绝对定位完成了各个元素的位置放置。

接下来让我们来看看向日葵中那一朵朵向阳而开的黄色花瓣是怎样实现的。我们需要定义好每个花瓣的大小、颜色和位置。

.sunflower .petal {
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: #F1C431;
  border-radius: 50% 50% 0 0;
  transform: rotate(45deg);
}
.petal1 {
  top: -60px;
  left: 10px;
}
.petal2 {
  top: -100px;
  left: 50px;
  transform: rotate(90deg);
}
.petal3 {
  top: -60px;
  left: 90px;
  transform: rotate(135deg);
}
.petal4 {
  top: 10px;
  left: 90px;
  transform: rotate(180deg);
}
.petal5 {
  top: 50px;
  left: 50px;
  transform: rotate(270deg);
}
.petal6 {
  top: 10px;
  left: 10px;
  transform: rotate(315deg);
}

上面的代码片段中，.petal为每一个花瓣的公共样式，我们用到了绝对定位来放置每朵花瓣的位置，用到了transform来旋转每一朵花瓣的角度，达到向太阳方向开放的效果。

最后让我们把所有的样式整合在一起。

<div class="sunflower">
  <div class="petal petal1"></div>
  <div class="petal petal2"></div>
  <div class="petal petal3"></div>
  <div class="petal petal4"></div>
  <div class="petal petal5"></div>
  <div class="petal petal6"></div>
</div>

上面的代码片段即为最终的HTML结构，只需要把CSS样式和HTML代码整合在一起，就可以得到一朵用CSS实现的向日葵，美丽不同凡响。