div+css实现玻璃圆球容器水纹液态波动进度效果代码-html代码-BFW代码库

div+css实现玻璃圆球容器水纹液态波动进度效果代码

代码语言：html

所属分类：进度条

代码描述：div+css实现玻璃圆球容器水纹液态波动进度效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    * {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(rgb(90, 90, 250), rgb(3, 3, 110));
}

.container,
.mave {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.container {
    border: 3px solid darkturquoise;
    padding: 10px;
}

.mave {
    position: relative;
    background-color: skyblue;
    overflow: hidden;
}

.mave::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    width: 300px;
    height: 300px;
    /* 背景颜色 a表示背景颜色的不透明度 */
    background-color: rgba(255, 255, 255, .8);
    border-radius: 40%;
    /* 可以快速让元素垂直+水平居中 -50%表示了让元素向左移动父元素宽度的一半，-60%代表让元素向上移动父元素的高度的60%，css3
    的新属性，使用起来非常方便，不用考虑父元素的高度和宽度，若要使用maigin的话就要考虑父元素的高度和宽度，还要计算出元素移动的大小位置 */
    transform: translate.........完整代码请登录后点击上方下载按钮下载查看