[分享]css3怎么画椭圆

CSS3是HTML的一个重要的样式语言，它使我们可以创建一些漂亮的效果。其中，椭圆是一个常见的形状，它可以用CSS3轻松地创建。 .ellipse { width:200px; /椭圆的宽度/ hei...

CSS3是HTML的一个重要的样式语言，它使我们可以创建一些漂亮的效果。其中，椭圆是一个常见的形状，它可以用CSS3轻松地创建。

 .ellipse {
    width:200px; /*椭圆的宽度*/
    height:70px; /*椭圆的高度*/
    margin:50px auto; /*auto使椭圆居中*/
    background-color: #f5f5f5; /*设置椭圆的背景颜色*/
    border-radius: 50% / 35%; /*设置椭圆的半径*/
    -webkit-transform: rotate(45deg); /*设置椭圆旋转的角度*/
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  } 

以上代码中，我们使用了border-radius属性来定义椭圆的半径。它的值是50%和35%。50%表示椭圆的长半轴，35%表示短半轴。我们使用rotate来旋转椭圆，从而使它变成一个菱形。

除此之外，我们还可以利用CSS3的动画效果，让椭圆有更多的变化。比如，我们可以让椭圆以水平方向移动。

 .ellipse {
    position:relative;
    animation: move 3s ease-in-out infinite alternate; /*定义动画*/
  }
  
  @keyframes move { /*定义动画的关键帧*/
    from { left:0px; }
    to { left:400px; }
  } 

在以上代码中，我们使用了animation来定义一个动画，这个动画让椭圆沿着水平方向移动。我们使用了关键帧来定义动画的开始和结束状态。

总之，CSS3是一个非常强大的样式语言，它可以创建很多精美的效果。椭圆是其中一个比较简单的示例，如果你了解更多的CSS3用法，你可以创建出更复杂的效果。