css实现波浪球效果图,用css实现圆形波浪效果图
时间: 2023-08-05 20:42:04 浏览: 76
要实现圆形波浪效果图,可以使用 CSS 的 `border-radius` 属性和伪元素 `::before` 和 `::after`。下面是一个简单的示例:
```html
<div class="wave"></div>
```
```css
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: #00bfff;
border-radius: 50%;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 50%;
top: -20px;
z-index: -1;
}
.wave::before {
left: -20px;
transform: translateX(-50%);
}
.wave::after {
right: -20px;
transform: translateX(50%);
}
```
在上面的示例中,我们首先创建了一个宽高为 200px 的圆形元素 `.wave`,并设置了背景颜色和圆角半径。接着,我们使用伪元素 `::before` 和 `::after` 创建两个白色的圆形元素,宽高与 `.wave` 相同,并设置了圆角半径和位置。通过 `top`、`left` 和 `right` 属性,我们将它们分别放置在左上角、右上角和右下角。
最后,我们通过 `transform` 属性对 `::before` 和 `::after` 进行位移,从而实现波浪的效果。你可以根据需要调整位移的值和白色圆形的大小来实现不同的波浪效果。