CSS做一杯冷饮清凉一夏

2022-11-30 75

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS做一杯冷饮清凉一夏

渐入三伏，酷热难耐，我们来用CSS做一杯冷饮来清凉一夏吧！

效果图

实现思路

我们利用flex布局实现元素居中的效果，使得整个杯子在页面中居中且拥有定位便于后面进行布局在利用边框实现杯子的样式，在通过glass类名盒子做出杯子中的液体效

果，这个需要使用背景色的渐变属性，在通过tube类名盒子实现吸管，这里的吸管有一个折弯的效果，需要利用定位以及旋转属性配合伪元素的方式进行实现，最后冰块的方式我们利用ice类名盒子实现，利用透明度属性结合背景色和边框圆角的属性的方式实现一个冰块的效果，在通过定位的方式定位到合适的位置，在利用盒子阴影属性实现复制出一个相同冰块的效果，最后在通过伪元素的方式实现其他俩个冰块的效果，在利用定位属性定位到合适的位置，接下来我们来实现一下吧

页面结构

<!-- 杯子 -->
 <div class="glass">
   <!-- 杯子内容 -->
    <div class="inside">
      <!-- 管子 -->
      <div class="tube"></div>
      <!-- 冰块 -->
      <div class="ice"></div>
    </div>
  </div>

初始样式

利用flex布局的方式实现元素居中

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 900px;
      width: 100vw;
      overflow: hidden;
      background: #F1E3D3;
    }

杯子基础样式

做出杯子的大致样式

/* 杯子 */
    .glass {
      width: 144px;
      height: 220px;
      margin: 0 auto;
      border: 5px solid #000;
      padding: 16px;
      position: relative;
    }

我们在通过圆角边框属性设置使得杯子下边拥有一个圆边

border-radius: 0 0 10% 10%;

杯子液体

我们通过背景颜色的渐变色属性实现杯子液体的效果且配合杯子也给液体一个下边圆角的效果

/* 杯子内部 */
    .inside {
      width: 100%;
      height: 100%;
      background: linear-gradient(rgb(39, 252, 252), rgb(37, 186, 255));
      border-radius: 0 0 10% 10%;
   }

杯子管子

用伪元素结合定位以及旋转属性实现一个弯曲管子的效果

/* 管子 */
    .tube {
      width: 8px;
      height: 42px;
      background: #fff;
      position: absolute;
      top: -47px;
      right: 42px;
      transform: rotate(10deg);
    }
    .tube:before {
      content: "";
      position: absolute;
      background-color: #fff;
      width: 8px;
      height: 42px;
      top: -37px;
      left: 11px;
      transform: rotate(30deg);
    }

冰块

冰块的实现我们通过背景透明色结合圆边框进行实现

.ice {
      width: 64px;
      height: 64px;
      background: #fff;
      opacity: 40%;
      border-radius: 30%;
      transform: rotate(250deg);
      position: absolute;
      margin-top: 145px;
      margin-left: 18px;
    }

我们在通过旋转属性和边框阴影的方式实现冰块的旋转和另一个冰块的实现

box-shadow: 96px 96px #fff;

最后通过冰块伪元素的方式实现其他俩个冰块，在通过定位属性进行定位冰块位置

.ice:before,
    .ice:after {
      content: "";
      position: absolute;
      width: 64px;
      height: 64px;
      background: #fff;
      border-radius: 30%;
    }
    .ice:before {
      transform: rotate(30deg);
      top: 12px;
      left:68px;
    }
    .ice:after {
      transform: rotate(230deg);
      top: 72px;
      left: 32px;
    }