新增第124个小实例:丝滑切换的loading加载动画
This commit is contained in:
parent
22f0751a31
commit
7fca577228
|
@ -127,4 +127,5 @@
|
|||
120. HTML5+CSS3+JS小实例:阿里云盘的侧边导航栏
|
||||
121. HTML5+CSS3小实例:飞行的钢铁侠loading加载动画
|
||||
122. HTML5+CSS3小实例:高光立体壁画式卡片悬停特效
|
||||
123. HTML5+CSS3+Vue小实例:3D圆点波浪动画特效
|
||||
123. HTML5+CSS3+Vue小实例:3D圆点波浪动画特效
|
||||
124. HTML5+CSS3小实例:丝滑切换的loading加载动画
|
|
@ -0,0 +1,82 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #444;
|
||||
}
|
||||
.loader{
|
||||
/* 禁止选取 */
|
||||
user-select: none;
|
||||
}
|
||||
.loader .spinner{
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.loader .spinner::before,
|
||||
.loader .spinner::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
/* 图形 */
|
||||
.loader .spinner::before{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #a08fd5;
|
||||
/* 执行动画:动画名 时长 贝塞尔曲线 无限次播放 */
|
||||
animation: spinner 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
/* 投影 */
|
||||
.loader .spinner::after{
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #333;
|
||||
bottom: -40px;
|
||||
animation: shadow 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
/* loading文字 */
|
||||
.loader .text{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 100;
|
||||
animation: text 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes spinner {
|
||||
50%{
|
||||
border-radius: 50%;
|
||||
background-color: #f5e866;
|
||||
transform: rotate(360deg) scale(0.5);
|
||||
}
|
||||
100%{
|
||||
background-color: #a08fd5;
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
50%{
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
@keyframes text {
|
||||
0%,100%{
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
50%{
|
||||
transform: translate(-50%,-50%) scale(0.5,0.5);
|
||||
color: #000;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
<!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>丝滑切换的loading加载动画</title>
|
||||
<link rel="stylesheet" href="124.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader">
|
||||
<div class="spinner"></div>
|
||||
<div class="text">loading</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue