水滴怕片效果实现

效果展示

CSS 知识点

• border-radius 属性运用

FANCY-BORDER-RADIUS 工具

此工具主要是实现不规则的图形。

FANCY-BORDER-RADIUS 工具地址

页面整体布局实现

<div class="container">
  <div class="drop" style="--clr: #ff0f5b">
    <div class="content">
      <h2>01h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam velit
        quis optio maiores autem non repellendus.
      p>
      <a href="#">Read Morea>
    div>
  div>
div>
1
2
3
4
5
6
7
8
9
10
11
12

实现水滴整体样式

.container .drop {
  position: relative;
  width: 350px;
  height: 350px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05), 25px 25px 20px rgba(0, 0, 0, 0.05),
    25px 30px 30px rgba(0, 0, 0, 0.05), inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  transition: 0.5s ease-in-out;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
6
7
8
9
10
11
12

FANCY-BORDER-RADIUS 工具生产不同形状的水滴样式

在线使用 FANCY-BORDER-RADIUS 工具后，复制出对应的border-radius属性值。在对应的元素上进行添加样式。

.container .drop:nth-child(1) {
  border-radius: 33% 67% 54% 46% / 30% 32% 68% 70%;
}
1
2
3

编辑悬停后的样式

.container .drop:hover {
  border-radius: 50%;
}
1
2
3

生产水滴上的两个白色阴影

.container .drop::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.8;
}

.container .drop::after {
  content: "";
  position: absolute;
  top: 90px;
  left: 110px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.6;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

生产对应内容的样式

.container .drop .content {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 15px;
  padding: 40px;
}

.container .drop .content h2 {
  position: relative;
  width: 80px;
  height: 80px;
  background: eff0f4;
  border-radius: 50%;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1), inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 15px 10px rgba(0, 0, 0, 0.025);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: var(--clr);
}

.container .drop .content a {
  position: relative;
  padding: 10px 25px;
  background: var(--clr);
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  font-weight: 500;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  opacity: 0.6;
  transition: 0.5s;
}

.container .drop .content a:hover {
  opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

完整代码下载

完整代码下载