[分享]css3怎样做一个船

CSS3是一种强大的网页设计语言，可以用来创建各种各样的动画和特效。下面我们就一起来学习如何用CSS3来制作一艘漂亮的船吧。/ 定义船的样式 / .ship{ : relative; width: 3...

CSS3是一种强大的网页设计语言，可以用来创建各种各样的动画和特效。下面我们就一起来学习如何用CSS3来制作一艘漂亮的船吧。

/* 定义船的样式 */
.ship{
  position: relative;
  width: 300px;
  height: 150px;
  background-color: #232F3A;
  border-radius: 0 0 50% 50%;
}

/* 绘制船体 */
.ship:before{
  content: "";
  position: absolute;
  width: 70%;
  height: 100%;
  right: 0;
  background-color: #FDFFFC;
  border-radius: 0 0 50% 50% ;
}

/* 绘制船的桅杆 */
.ship:after{
  content: "";
  position: absolute;
  width: 15px;
  height: 100px;
  background-color: #FDFFFC;
  border-radius: 50%;
  left: 45%;
  top: -45%;
  transform: rotate(45deg);
}

/* 绘制船的风帆 */
.sail{
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #FDFFFC;
  border-radius: 50%;
  transform: rotate(45deg);
}

/* 绘制风帆的三角形 */
.triangle{
  position: absolute;
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-right: 80px solid #FF851B;
  border-bottom: 80px solid transparent;
  transform: rotate(-45deg);
  right: -20px;
  top: 40px;
}

/* 为风帆添加动画效果 */
.sail{
  animation-name: sail;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 定义风帆动画 */
@keyframes sail{
  0%{
    left: 0;
    top: 0;
  }
  50%{
    left: 250px;
    top: 100px;
  }
  100%{
    left: 0;
    top: 0;
  }
} 

通过以上的CSS代码，我们可以成功地绘制一艘漂亮的船。这个船不仅拥有精美的外观，更有动态的风帆。我们可以将这些代码嵌入到网页中，通过HTML语言来调用，从而在页面中显示出这个精美的船。相信从制作这个船开始，我们会对CSS3的使用更加熟练，掌握更多的制作技巧。希望大家都能够在CSS3的世界里创造出更美丽、更独特的设计。