Html设计小技巧之水滴效果

回忆彡美好

于 2024-02-24 09:00:00 发布

阅读量509

点赞数 15

分类专栏： Html设计文章标签： html css css3 开发语言前端

本文链接：https://blog.csdn.net/weixin_66448747/article/details/136263629

版权

Html设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Html设计小技巧之水滴效果

1. 效果展示

2. 代码展示

CSS代码：

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: rgb(144, 238, 144);
}

.water {
  /* 布局居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 200px;
  height: 200px;
  /* 设置液滴形状 */
  border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
  /* 设置液滴阴影 */
  box-shadow: inset 10px 20px 30px rgba(128, 128, 128, 0.5),
    10px 10px 20px rgba(128, 128, 128, 0.3),
    15px 15px 30px rgba(128, 128, 128, 0.05),
    inset -10px -20px 30px rgba(192, 239, 192, 0.8);
  animation: waterRadius 3s linear infinite alternate;
}

/* 液滴反光 */
.water::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 35%;
  width: 20px;
  height: 40px;
  transform: rotate(50deg);
  background-color: rgba(228, 251, 228, 0.8);
  border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%;
  filter: blur(5px);
}

.water::after {
  content: '';
  position: absolute;
  top: 39%;
  left: 23%;
  width: 12px;
  height: 14px;
  background-color: rgba(228, 251, 228, 0.8);
  border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%;
  filter: blur(4px);
}

/* 液滴动画 */
@keyframes waterRadius {
  25% {
    border-radius: 58% 42% 59% 41% / 52% 56% 54% 48%;
  }

  50% {
    border-radius: 46% 54% 40% 60% / 52% 33% 67% 48%;
  }

  75% {
    border-radius: 65% 35% 71% 29% / 31% 60% 40% 69%;
  }

  100% {
    border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%;
  }
}

HTML代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Html小技巧之水滴特效</title>
  <link rel="stylesheet" href="css/002.css">
</head>

<body>
  <div class="water"></div>
</body>

</html>