渐入三伏，酷热难耐，我们来用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; }
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
