我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

简介

今天又是美好的一天，想到夏天，很多人都想到了美丽的沙滩，躺在沙滩上听听海的声音，跟一群朋友在沙滩玩沙子，游泳，捡贝壳之类的吧。本文给大家用css简单的画一幅沙滩景色，大海，椰树，沙滩，贝壳，让大家就算没空去海边看看也可以瞧一下美好的景色，没想到css的魔法这么大吧，下面给大家慢慢讲述。

代码块

代码介绍

本文的制作比较繁琐，因为涉及的元素很多，制作起来比较花费时间，整个画面制作有大海、沙滩、椰子树、贝壳、海星、石子等，制作完成这些之后再给大海加上了波浪的效果，椰子树风吹摇摆的效果。

1. 椰树，大海，沙滩制作

先画大海波浪效果，再实现椰子树，最后来画沙滩，还有沙滩上面的贝壳。

1.1 大海制作

大海的制作是填充一个蓝色大海的颜色，再加上一些浪花，波浪是由很多个不同的椭圆叠加在一起，定位拼合起来，因为后期做波浪效果动画的时候，需要很长的波浪，这样一起滚动，所以需要复制很多圆拼接。

html：

<!-- 波浪 -->
    <div class="wave">
      <div class="wave-cell01">
        <div class="wave-01"></div>
        <div class="wave-02"></div>
        <div class="wave-03"></div>
        <div class="wave-04"></div>
        <div class="wave-05"></div>
        <div class="wave-06"></div>
        <div class="wave-07"></div>
        <div class="wave-08"></div>
        <div class="wave-09"></div>
        <div class="wave-10"></div>
        <div class="wave-11"></div>
        <div class="wave-12"></div>
        <div class="wave-13"></div>
        <div class="wave-14"></div>
        <div class="wave-15"></div>
      </div>
      <div class="wave-cell02">
        <div class="wave-01"></div>
        <div class="wave-02"></div>
        <div class="wave-03"></div>
        <div class="wave-04"></div>
        <div class="wave-05"></div>
        <div class="wave-06"></div>
        <div class="wave-07"></div>
        <div class="wave-08"></div>
        <div class="wave-09"></div>
        <div class="wave-10"></div>
        <div class="wave-11"></div>
        <div class="wave-12"></div>
        <div class="wave-13"></div>
        <div class="wave-14"></div>
        <div class="wave-15"></div>
      </div>
    </div>

样式：

/* 波浪 */
.wave{
  display: flex;
  width: 100%;
  height: 160px;
  background: #6ED3E8;
  position: relative;
}
.wave-cell01{
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.wave-01{
  width: 500px;
  height: 300px;
  background: #6ED3E8;
  border-radius: 60%;
  position: absolute;
  bottom: -46px;
  left: -140px;
}
.wave-02{
  width: 537px;
  height: 300px;
  background: #6ED3E8;
  border-radius: 60%;
  position: absolute;
  bottom: -72px;
  left: 254px;
}
.wave-03{
  width: 507px;
  height: 300px;
  background: #6ED3E8;
  border-radius: 60%;
  position: absolute;
  bottom: -51px;
  left: 714px;
}
.wave-04{
  width: 462px;
  height: 300px;
  background: #6ED3E8;
  border-radius: 60%;
  position: absolute;
  bottom: -25px;
  left: 1114px;
}
.wave-05,.wave-06,
.wave-07,.wave-08,
.wave-09,.wave-10,
.wave-11,.wave-12,
.wave-13,.wave-14,
.wave-15{
  width: 862px;
  height: 300px;
  background: #6ED3E8;
  border-radius: 60%;
  position: absolute;
  bottom: -25px;
  left: 1514px;
}
.wave-06{
  left: 2314px;
}
.wave-07{
  left: 3114px;
}
.wave-08{
  left: 3914px;
}
.wave-09{
  left: 4714px;
}
.wave-10{
  left: 5514px;
}
.wave-11{
  left: 6314px;
}
.wave-12{
  left: 7114px;
}
.wave-13{
  left: 7914px;
}
.wave-14{
  left: 8714px;
}
.wave-15{
  left: 9514px;
}

.wave-cell02{
  position: absolute;
  bottom: -17px;
  left: 56px;
}
.wave-cell02 > div{
  background: #82DCEF;
  height: 145px;
}

1.2 椰子树

椰子树制作先画了枝干，再画椰子，最后画椰子。枝干是画了长矩形，现实中椰子树本来枝干可能是一边小一边大，哈，这个不知道怎么写，所以讲究画了矩形一样大小了；椰子是用椭圆画的；椰子叶子用圆角样式调节了半圆，然后再用伪类画另外的半圆，叠加过去，就会看到弯曲圆弧行政的椰子叶，需要旋转角度，画完一片叶子再复制4片叶子，有些可能会没连接闭合好的叶子需要另外重新慢慢调节好。

html：

<!-- 椰子树 -->
<div class="tree">
  <div class="trunk-box">
    <div class="trunk">
      <div class="line1"></div>
      <div class="line1 line2"></div>
      <div class="line1 line3"></div>
      <div class="line1 line4"></div>
      <div class="line1 line5"></div>
    </div>
  </div>
  <div class="coconut">
    <div class="coconut1"></div>
    <div class="coconut1 coconut2"></div>
    <div class="coconut1 coconut3"></div>
  </div>
  <div class="leaf">
    <div class="leaf1 leafO"></div>
    <div class="leaf1 leaf2"></div>
    <div class="leaf1 leaf3"></div>
    <div class="leaf1 leaf4"></div>
    <div class="leaf1 leaf5"></div>
  </div>
</div>

样式：

/* 椰子树 */
.tree{
  position: absolute;
  top: 130px;
  left: 100px;
  z-index: 4;
}
.trunk{
  width: 26px;
  height: 200px;
  background: #A98761;
  border: 3px solid #6A5253;
  transform: rotate(-5deg);
}
.trunk .line1{
  width: 24px;
  height: 3px;
  background: #6A5253;
  position: absolute;
  top: 30px;
  right: 0;
  transform: rotate(-10deg);
}
.trunk .line2{
  top: 70px;
}
.trunk .line3{
  top: 100px;
}
.trunk .line4{
  top: 130px;
}
.trunk .line5{
  top: 160px;
}
.coconut{
  position: absolute;
  top: -16px;
  left: -15px;
}
.coconut1{
  width: 25px;
  height: 22px;
  background: #7C8767;
  border: 2px solid #6A5253;
  border-radius: 60%;
  position: absolute;
  z-index: 3;
}
.coconut2{
  width: 28px;
  height: 24px;
  top: -20px;
  left: 7px;
  z-index: 2;
}
.coconut3{
  width: 20px;
  height: 24px;
  top: -4px;
  left: 20px;
  z-index: 1;
}
.leaf{
  position: absolute;
  top: -77px;
  left: -12px;
  z-index: 0;
  z-index: -1;
}
.leaf1{
  width: 124px;
  height: 40px;
  background: #94B65F;
  border-radius: 193% 200% 0 0/372% 328% 0 0;
  border: 2px solid #585854;
  transform: rotate(-45deg);
  position: absolute;
  top: 23px;
  left: 27px;
}
.leaf1::after{
  content: "";
  position: absolute;
  top: 21px;
  left: 1px;
  width: 97%;
  height: 20px;
  background: #6ED3E8;
  border: 2px solid #585854;
  border-bottom: 0;
  border-radius: 256% 188% 0 0/372% 328% 0 0;
}
.leaf2{
  width: 82px;
  height: 26px;
  transform: rotate(22deg);
  position: absolute;
  top: 23px;
  left: -72px;
}
.leaf2::after,.leaf3::after{
  top: 15px;
  left: 1px;
  transform: rotate(8deg);
}
.leaf3{
  width: 90px;
  height: 26px;
  transform: rotate(-38deg);
  position: absolute;
  top: 40px;
  left: -84px;
}
.leaf4{
  width: 90px;
  height: 26px;
  transform: rotate(10deg);
  position: absolute;
  top: 33px;
  left: 34px;
}
.leaf4::after,.leaf5::after{
  top: 15px;
  left: -2px;
  transform: rotate(-9deg);
}
.leaf5{
  width: 90px;
  height: 26px;
  transform: rotate(47deg);
  position: absolute;
  top: 51px;
  left: 41px;
}

1.3 泥土

椰子树的泥土制作，画了两个半圆重叠一起，再在上面画一些沙子，看起来像一点。

html：

 <!-- 泥土 -->
<div class="earth">
  <div class="earth1 earth1-left">
    <div class="sand1"></div>
    <div class="sand1 sand2"></div>
    <div class="sand1 sand3"></div>
    <div class="sand1 sand4"></div>
    <div class="sand1 sand5"></div>
    <div class="sand1 sand6"></div>
    <div class="sand1 sand7"></div>
    <div class="sand1 sand8"></div>
  </div>
  <div class="earth1 earth2">
    <div class="sand1"></div>
    <div class="sand1 sand2"></div>
    <div class="sand1 sand3"></div>
    <div class="sand1 sand4"></div>
    <div class="sand1 sand5"></div>
    <div class="sand1 sand6"></div>
    <div class="sand1 sand7"></div>
    <div class="sand1 sand8"></div>
  </div>
</div>

样式：

/* 泥土 */
.earth{
  position: absolute;
  top: 300px;
  left: 0;
  z-index: 5;
  display: flex;
}
.earth1{
  width: 160px;
  height:80px;
  background: #E9B855;
  border: 2px solid #3F443E;
  border-bottom: none;
  border-radius: 142% 160% 0 0/ 200% 300% 0 0;
  position: relative;
  z-index: 5;
}
.earth1-left{
  border-right: 0;
}
.earth2{
  margin-left: -70px;
  border-left: 0;
  z-index: 4;
}
.earth .sand1{
  width: 5px;
  height: 7px;
  border-radius: 80%;
  background: #B8882D;
  position: absolute;
  left: 40px;
  top: 20px;
}
.earth .sand2{
  left: 80px;
  top: 30px;
}
.earth .sand3{
  left: 70px;
  top: 30px;
}
.earth .sand4{
  left: 60px;
  top: 50px;
}
.earth .sand5{
  left: 10px;
  top: 50px;
}
.earth .sand6{
  left: 20px;
  top: 70px;
}
.earth .sand7{
  left: 120px;
  top: 50px;
}
.earth .sand8{
  left: 120px;
  top: 20px;
}

1.4 石头

石头画比较简单，椭圆边框绘画；贝壳也是椭圆矩形拼接叠加起来，只不过需要旋转角度。复制多几份出来看起来多一点。

html：

<!-- 石头+贝壳 -->
<div class="stone">
  <div class="stone1"></div>
  <div class="stone1 stone2"></div>
  <div class="stone1 stone3"></div>
  <div class="stone1 stone4"></div>
  <div class="stone1 stone5"></div>
  <div class="stone1 stone6"></div>
  <div class="stone1 stone7"></div>
  <div class="stone1 stone8"></div>
  <div class="stone1 stone9"></div>
  <div class="stone1 stone10"></div>
</div>
<div class="stone-big">
  <div class="stone-big-1">
    <div class="spot1"></div>
    <div class="spot1 spot2"></div>
    <div class="spot1 spot3"></div>
  </div>
  <div class="stone-big-2">
    <div class="spot1"></div>
    <div class="spot1 spot2"></div>
    <div class="spot1 spot3"></div>
  </div>
  <div class="stone-big-3">
    <div class="spot1"></div>
    <div class="spot1 spot2"></div>
    <div class="spot1 spot3"></div>
  </div>
</div>

样式：

/* 石头+贝壳 */
.stone{
  position: absolute;
  left: 300px;
  top: 160px;
}
.stone1{
  width: 15px;
  height: 12px;
  border-radius: 60%;
  background: #B3A479;
  border: 2px solid #57504D;
  transform: rotate(-43deg);
  position: absolute;
  left: 100px;
  top: 163px;
}
.stone2{
  width: 10px;
  height: 8px;
  left: 200px;
  top: 163px;
  transform: rotate(43deg);
}
.stone3{
  width: 20px;
  height: 18px;
  left: 374px;
  top: 123px;
  transform: rotate(43deg);
}
.stone4{
  width: 2px;
  height: 3px;
  left: 245px;
  top: 123px;
  background: #765F47;
}
.stone5{
  width: 1px;
  height: 1px;
  left: 145px;
  top: 123px;
  background: #765F47;
}
.stone6{
  width: 3px;
  height: 4px;
  left: 80px;
  top: 153px;
  border: 0;
  background: #765F47;
}
.stone7{
  width: 3px;
  height: 4px;
  left: 6px;
  top: 180px;
  border: 0;
  background: #765F47;
}
.stone8{
  width: 3px;
  height: 4px;
  left: 700px;
  top: 180px;
  background: #765F47;
}
.stone9{
  width: 8px;
  height: 12px;
  left: 760px;
  top: 150px;
  background: #765F47;
}
.stone10{
  width: 12px;
  height: 14px;
  left: 890px;
  top: 190px;
  background: #765F47;
}

.stone-big{
  position: absolute;
  left: 780px;
  top: 300px;
  display: flex;
}
.stone-big-1{
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #7C6150;
  border-bottom: 0;
  border-radius: 123px 113px 0 0/181px 184px 0 0;
}
.stone-big-2{
  position: absolute;
  left: 14px;
  width: 10px;
  height: 20px;
  border: 2px solid;
  border-bottom: 0;
  border-radius: 123px 113px 0 0/181px 184px 0 0;
  margin-top: -10px;
}
.stone-big-3{
  position: absolute;
  left: 28px;
  width: 10px;
  height: 10px;
  border: 2px solid;
  border-bottom: 0;
  border-radius: 123px 113px 0 0/181px 184px 0 0;
}
.spot1{
  width: 2px;
  height: 3px;
  background: #7C6150;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
}
.spot2{
  left: 8px;
  top: 6px;
}
.spot3{
  left: 5px;
  top: 11px;
}

1.5 海星

海星一开始画的是五角星，看起来比较不像海星，所以就有了海星2号，海星2号是由几个椭圆形状的拼接旋转叠加在一起，然后在上面画几个圆点，这样看起来就比较像了。

html：

<!-- 海星 -->
<div class="starfish">
  <div class="star">
  </div>
  <div class="star-b"></div>
</div>
<div class="starfish starfish-pos2">
  <div class="star"></div>
  <div class="star-b"></div>
</div>
<div class="starfish starfish-pos3">
  <div class="star"></div>
  <div class="star-b"></div>
</div>
<!-- 海星2--start -->
<div class="h-star">
  <div class="h-star0 h-star1"></div>
  <div class="h-star0 h-star2"></div>
  <div class="h-star0 h-star3"></div>
  <div class="h-star0 h-star4"></div>
  <div class="h-star0 h-star5"></div>
</div>
<!-- end -->

样式：

/* 海星 */
.starfish{
  position: absolute;
  left: 302px;
  top: 199px;
  z-index: 5;
  transform: skew(3deg) scale(0.8) rotate(22deg);
}
.starfish-pos2{
  left: 584px;
  top: 272px;
  transform: skew(3deg) scale(0.5) rotate(22deg);
}
.starfish-pos3{
  left: 1200px;
  top: 272px;
  transform: skew(3deg) scale(0.5) rotate(72deg);
}
.star{
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #E6A93C transparent;
  border-width: 70px 100px;
  transform: rotate(35deg) scale(0.2);
}
.star::before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: -128px;
  left: -95px;
  border-style: solid;
  border-color: transparent transparent #E6A93C transparent;
  border-width: 80px 30px;
  transform: rotate(-35deg);
}
.star::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: -45px;
  left: -140px;
  border-style: solid;
  border-color: transparent transparent #E6A93C transparent;
  border-width: 70px 100px;
  transform: rotate(-70deg);
}
/* 五角星底层 */
.star-b{
  position: absolute;
  top: 9px;
  left: 1px;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #524C48 transparent;
  border-width: 70px 100px;
  transform: rotate(35deg) scale(0.25);
}
.star-b::before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: -128px;
  left: -95px;
  border-style: solid;
  border-color: transparent transparent #524C48 transparent;
  border-width: 80px 30px;
  transform: rotate(-35deg);
}
.star-b::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: -45px;
  left: -140px;
  border-style: solid;
  border-color: transparent transparent #524C48 transparent;
  border-width: 70px 100px;
  transform: rotate(-70deg);
}

/* 海星2-start */
.h-star{
  position: absolute;
  left: 900px;
  top: 300px;
}
.h-star::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 80%;
  background: #B8882D;
  position: absolute;
  left: 27px;
  top: -11px;
  z-index: 2;
}
.h-star1,.h-star0{
  position: absolute;
  left: 14px;
  width: 11px;
  height: 18px;
  border-bottom: 0;
  margin-top: -10px;
  border: 2px solid #E6A93C;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: rotate(40deg);
  background-color: #E6A93C;
  z-index: 1;
}
.h-star0::after{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 80%;
  background: #B8882D;
  position: absolute;
  left: 2px;
  top: 11px;
}
.h-star0::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 80%;
  background: #B8882D;
  position: absolute;
  left: 2px;
  top: 3px;
}
.h-star2{
  left: 30px;
  transform: rotate(320deg);
}
.h-star3{
  left: 36px;
  top: -13px;
  transform: rotate(260deg);
  z-index: 0;
}
.h-star4{
  left: 8px;
  top: -11px;
  transform: rotate(100deg);
  z-index: 0;
}
.h-star5{
  left: 21px;
  top: -19px;
  transform: rotate(542deg);
}
/* end */

1.6 贝壳

贝壳实在是太多形状了又不规则，画起来比较难，我最后画出来的这个贝壳感觉比较像羽毛球（哭笑不得），哈哈，知道是贝壳就好。

<!-- 贝壳 -->
<div class="shell">
  <div class="shell-b"></div>
  <div class="shell-p-b">
    <div class="shell-p1"></div>
    <div class="shell-p1 shell-p2"></div>
    <div class="shell-p1 shell-p3"></div>
    <div class="shell-p1 shell-p4"></div>
  </div>
</div>
<div class="shell shell-pos2">
  <div class="shell-b"></div>
  <div class="shell-p-b">
    <div class="shell-p1"></div>
    <div class="shell-p1 shell-p2"></div>
    <div class="shell-p1 shell-p3"></div>
    <div class="shell-p1 shell-p4"></div>
  </div>
</div>

样式：

/* 贝壳 */
.shell{
  position: absolute;
  top: 290px;
  left: 477px;
  z-index: 6;
  transform: scale(0.6);
}
.shell-b{
  width: 20px;
  height: 20px;
  background: #AC9162;
  border: 2px solid #806A65;
  border-radius: 10px;
}
.shell-p-b{
  position: absolute;
  top: -21px;
  left: -12px;
  display: flex;
}
.shell-p1{
  width: 12px;
  height: 30px;
  background: #AC9162;
  border-radius: 46%;
  border: 2px solid #806A65;
  transform: rotate(-29deg);
}
.shell-p2{
  transform: rotate(-19deg);
  margin-left: -6px;
}
.shell-p3{
  transform: rotate(-5deg);
  margin-left: -6px;
}
.shell-p4{
  transform: rotate(19deg);
  margin-left: -6px;
}

.shell-pos2{
  top: 320px;
  left: 877px;
  transform: rotate(60deg) scale(0.6);
}

2. 海浪和椰子树摇摆的动画

2.1 海浪动画

海浪动画是用css3的位移transform: translate(-9514px);设置一段距离移动，设置了两层，希望看起来能更像一点。

样式：

/* 波浪动画 */
.wave-cell01{
  transition: all 0.5s;
  animation: shake 300s linear infinite alternate;
}
@keyframes shake{
  0%{
    transform: translate(0);
    bottom: 0;
  }
  100%{
    transform: translate(-9514px);
    bottom: -30px;
  }
}
.wave-cell02{
  transition: all 2s;
  animation: shake2 400s linear infinite alternate;
}
@keyframes shake2{
  0%{
    transform: translate(0);
    bottom: -20px;
  }
  100%{
    transform: translate(-9514px);
    bottom: -10px;
  }
}

2.2 椰子树动画

椰子树动画是给椰子叶加了旋转动画效果，幅度设置小一点点，不需要那么大，设置的时候重要的地方在于设置基点transform-origin: left bottom; 控制叶子的一头摆动，枝干也是同样的道理。

样式：

/* 椰子树动画 */
.leafO{
  transform-origin: left bottom;
  animation: blow1 2s linear infinite alternate;
}
@keyframes blow1{
  0%{
    transform: rotate(-45deg);
  }
  100%{
    transform: rotate(-40deg);
  }
}
.leaf2{
  transform-origin: right bottom;
  animation: blow2 2s linear infinite alternate;
}
@keyframes blow2{
  0%{
    transform: rotate(22deg);
  }
  100%{
    transform: rotate(28deg);
  }
}
.leaf3{
  transform-origin: right top;
  animation: blow3 2s linear infinite alternate;
}
@keyframes blow3{
  0%{
    transform: rotate(-38deg);
  }
  100%{
    transform: rotate(-32deg);
  }
}
.leaf4{
  transform-origin: left top;
  animation: blow4 2s linear infinite alternate;
}
@keyframes blow4{
  0%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(16deg);
  }
}
.leaf5{
  transform-origin: left top;
  animation: blow5 2s linear infinite alternate;
}
@keyframes blow5{
  0%{
    transform: rotate(47deg);
  }
  100%{
    transform: rotate(42deg);
  }
}
/* 枝干摆动 */
.trunk{
  transform-origin: center bottom;
  animation: swing 2s linear infinite alternate;
}
@keyframes swing{
  0%{
    transform: rotate(-2deg);
  }
  100%{
    transform: rotate(-3deg);
  }
}

总结

本文主要介绍了海浪，沙滩，沙滩上面的贝壳，海星之类的，还有椰子树制作，主要是画了几个比较重要代表的东西，希望这个夏天带给大家不一样的感受，想象一下自己在海边的感觉，感受着大海，仿佛微风吹在脸上。以上内容就这些，感谢观看，觉得还不错给个赞支持一下，谢谢~ ღ( ´･ᴗ･` )比心