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);
}
}