女孩子爱吃的冰淇淋

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

夏天当然也离不开冰淇淋啦

思路

这里画了2个冰淇淋，冰淇淋首先从底部开始，这里为了让它看这更像，就加了3条杠，然后画冰淇淋球，通过改变定位颜色，冰淇淋球就画好了，然后加了个背景色，颜色略深，加了个透明这样更好看写。

/*透明度*/
opacity: 0.3;

div布局

<div id="app">

  <div>
    <div class="sj"></div>
    <div class="bqlq"></div>
    <div class="bqlqa"></div>
    <div class="bqlqb"></div>
    <div class="hg"></div>
    <div class="hgA"></div>
    <div class="hgB"></div>
  </div>
  <div class="s">

  </div>
  <div class="bqlb">
    <div class="q"></div>
    <div class="qa"></div>
    <div class="qb"></div>
  </div>

</div>

css样式

.sj{
  width: 0px;         
	height: 0px;
	border: 150px solid #FEE067;
  border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
  position: relative;
  z-index: 9;
}
#app{
  position: relative;
  top: 200px;
  left: 200px;
}
.bqlq{
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background-color: #BF88FC;
  position: absolute;
  left: 20px;
  top: -80px;
  border: 3px solid #000;
}
.bqlqa{
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background-color: #FE42A9;
  position: absolute;
  left: 100px;
  top: -120px;
  border: 3px solid #000;
}
.bqlqb{
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background-color: #96633D;
  position: absolute;
  left: 60px;
  top: -150px;
  border: 3px solid #000;
}
.hg{
  position: relative;
  left: 30px;
  width: 100px;
  height: 10px;
  border-radius: 5px;
  background-color: #D7AE28;
  top: -280px;
  z-index: 11;
}
.hgA{
  position: relative;
  left: 60px;
  width: 70px;
  height: 10px;
  border-radius: 5px;
  background-color: #D7AE28;
  top: -260px;
  z-index: 11;
}
.hgB{
  position: relative;
  left: 90px;
  width: 40px;
  height: 10px;
  border-radius: 5px;
  background-color: #D7AE28;
  top: -240px;
  z-index: 11;
}
.s{
  background-color: #ECDEFE;
  border-radius: 380px;
  width: 380px;
  height: 380px;
  position: relative;
  top: -400px;
  left: -30px;
  z-index: -1;
  opacity: 0.3;
}
.bqlb{
  background-color: #FE51A1;
  border: 3px solid #6247AF;
  width: 100px;
  height: 50px;
  position: relative;
  left: 120px;
  bottom: 300px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

}
.q{
  background-color: #70D7FD;border: 3px solid #6247AF;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: relative;
  top: -56px;
  left: -10px;
}
.qa{
  background-color: #FE51A1;border: 3px solid #6247AF;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: relative;
  top: -152px;
  left: 19px;
}
.qb{
  background-color: #FEB882;border: 3px solid #6247AF;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: relative;
  top: -168px;
  left: 50px;
}

展示效果

码上掘金 (juejin.cn)

每天进步亿点点！！！