HTML5+CSS3小实例：简单好玩的水球加载效果HTML5+CSS3做一个简单又好玩的水球加载效果，先别看代码，你能想

HTML5+CSS3做一个简单又好玩的水球加载效果，先别看代码，你能想到这个效果是如何实现的吗？相信我，看完代码你会惊呼就这？也太简单了吧！

效果：

源码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>简单好玩的水球加载效果</title>
    <link rel="stylesheet" href="../css/23.css">
</head>

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

</html>

*{
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(to bottom,#89f7fe,#66a6ff);
}
.wave{
    width: 200px;
    height: 200px;
    background-color: #2797e7;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 0px 50px rgba(255,255,255,0.2);
    /* 溢出隐藏 */
    overflow: hidden;
}
.wave::before{
    content: "";
    width: 300px;
    height: 300px;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-65%);
    border-radius: 40%;
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: wave 5s linear infinite;
}
.wave::after{
    content: "加载中...";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,40px);
    color: #2797e7;
}

/* 定义动画 */
@keyframes wave{
    100%{
        transform: translate(-50%,-65%) rotate(360deg);
    }
}