HTLML+CSS实现水滴和水涌动效果

Leobanado

已于 2022-12-05 10:05:02 修改

阅读量886

点赞数 9

文章标签： css html 前端

于 2022-12-05 10:03:48 首次发布

本文链接：https://blog.csdn.net/m0_63452347/article/details/128181809

版权

昨天看了一个纯HTML+CSS实现的水滴特效，代码简单但视觉效果非常棒，受益匪浅。今天手写实现了一遍，源代码代码请点击下载

在这里插入图片描述

水滴原理

不规则的水滴
水滴的不规则边缘，主要使用了border-radius。日常使用中，border-radius一般使用单个数值或百分比，如border-radius: 50%;将元素变成圆形；或类似 border-radius: 0 0 10px 10px;这种值，将下面的2个角设为10px。这种情况我们可以理解为只设定了一组值，border-radius呈现圆形边框角。
其实border-radius支持指定2组值，用于设定椭圆型的边框角。如border-radius: 50% 30% 40% 30% / 30% 40% 30% 50%，第1组值设定水平方向的边框角，第2组值设定垂直方向的边框角；或者border-left-top-radius: 10px 20pxl。同时设定某个角2个border-radius值，组合这两组数值，便能得到不规则的形状。
水滴的通透性
水滴通透性主要基于box-shadow，搭配rgba（带透明度的色值）。
box-shadow支持设定1组值（向右x轴偏离、向下y轴偏离、模糊度、阴影设置），也支持设定多组数值（分别为上右下左）。一般上和左box-shadow设定为inset内阴影，左和下box-shadow外阴影，即可模拟出水滴光照效果。通过rgba的透明度，让水滴更具通透性。
水滴动效
完成上述效果后，我们可以在水滴上加动效。动效可以简单的用transition实现，也可以自定义animation。
如果需要定义一些更复杂、更具交互性的效果，我们可以引入js代码辅助计算。

源码实现

首先，HTML代码，设计了3个div（即3个水滴）

<div class="container">
  <div class="water-drop">
    <div>1</div>
    <p>水滴的形状，由border-radius直接控制</p>
  </div>
  <div class="water-drop">
    <div>2</div>
    <p>通过box-shadow调整水滴的视觉通透性</p>
  </div>
  <div class="water-drop">
    <div>3</div>
    <p>通过hover和animation、transition，设定水滴动效</p>
  </div>
</div>

CSS代码

.container {
  font-family: monospace;
  font-size: 16px;
  display: flex;
  cursor: pointer;
  color: #999;
}
.container .water-drop {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .02),
    10px 10px 10px rgba(0, 0, 0, .02),
    10px 10px 10px rgba(0, 0, 0, .02),
    inset 10px 10px 10px rgba(0, 0, 0, .02);
  align-items: center;
  transition: border-radius ease-in-out .5s;
}
.container .water-drop p {
  padding-top: 40px;
  height: 40px;
}
.container .water-drop::before {
  content: '';
  position: absolute;
  left: calc(50% - 40px);
  top: 80px;
  width: 80px;
  height: 80px;
  display: block;
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .1), 
    inset 10px 10px 10px rgba(0, 0, 0, .1), 
    10px 10px 10px rgba(0, 0, 0, .1), 
    10px 10px 10px rgba(0, 0, 0, .1);
  border-radius: 50%;
  border-color: #fff;
}
.container .water-drop:nth-child(1) {
  border-radius: 40% 50% 40% 30% / 30% 40% 30% 50%;
}
.container .water-drop:nth-child(2) {
  border-radius: 30% 40% 40% 30% / 50% 30% 40% 30%;
}
.container .water-drop:nth-child(3) {
  border-radius: 50% 30% 40% 30% / 30% 40% 30% 50%;
}
.container .water-drop:hover {
  border-radius: 50%;
}