新增第88个小实例：广告灯牌效果的loading动画
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
ed93aaed70
commit
f51cfb4cef
|
|
@ -91,4 +91,5 @@
|
|||
84. HTML5+CSS3小实例：翻书动画
|
||||
85. HTML5+CSS3小实例：莫比乌斯环loading动画
|
||||
86. HTML5+CSS3+JS小实例：滚动渐变导航栏
|
||||
87. HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果
|
||||
87. HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果
|
||||
88. HTML5+CSS3小实例：广告灯牌效果的loading动画
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
min-height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
/* 自定义属性，可通过var函数对其调用 */
|
||||
--c: gold;
|
||||
}
|
||||
.loader{
|
||||
/* 弹性布局 垂直排列 居中 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 执行颜色改变动画 */
|
||||
animation: changeColor 5s linear infinite;
|
||||
}
|
||||
.dot-box{
|
||||
display: flex;
|
||||
}
|
||||
.dot-box .dot{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
/* 通过var函数调用自定义属性--c，设置颜色 */
|
||||
background-color: var(--c);
|
||||
margin: 20px 10px;
|
||||
/* 阴影（发光效果） */
|
||||
box-shadow: 0 0 10px var(--c),
|
||||
0 0 20px var(--c),
|
||||
0 0 40px var(--c),
|
||||
0 0 60px var(--c),
|
||||
0 0 80px var(--c),
|
||||
0 0 100px var(--c);
|
||||
/* 默认缩放为0.1倍 */
|
||||
transform: scale(0.1);
|
||||
/* 设置动画：动画名 时长 线性 无限播放 */
|
||||
animation: dotAnimate 2s linear infinite;
|
||||
/* 设置每一个圆点的动画延迟时间 */
|
||||
animation-delay: calc(0.1s * var(--i));
|
||||
}
|
||||
.loader p{
|
||||
color: var(--c);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
.dot-box:nth-child(3) .dot{
|
||||
/* 设置下面一排圆点的动画延迟时间 */
|
||||
animation-delay: calc(-0.1s * var(--i));
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 圆点的动画 */
|
||||
@keyframes dotAnimate {
|
||||
0%{
|
||||
/* 设置缩放 */
|
||||
transform: scale(0.1);
|
||||
}
|
||||
10%{
|
||||
transform: scale(1);
|
||||
}
|
||||
50%,100%{
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
/* 颜色改变的动画 */
|
||||
@keyframes changeColor {
|
||||
0%{
|
||||
/* 颜色滤镜 */
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
100%{
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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="../css/88.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader">
|
||||
<div class="dot-box">
|
||||
<div class="dot" style="--i:0;"></div>
|
||||
<div class="dot" style="--i:1;"></div>
|
||||
<div class="dot" style="--i:2;"></div>
|
||||
<div class="dot" style="--i:3;"></div>
|
||||
<div class="dot" style="--i:4;"></div>
|
||||
<div class="dot" style="--i:5;"></div>
|
||||
<div class="dot" style="--i:6;"></div>
|
||||
<div class="dot" style="--i:7;"></div>
|
||||
<div class="dot" style="--i:8;"></div>
|
||||
<div class="dot" style="--i:9;"></div>
|
||||
</div>
|
||||
<p>拼命加载中...</p>
|
||||
<div class="dot-box">
|
||||
<div class="dot" style="--i:0;"></div>
|
||||
<div class="dot" style="--i:1;"></div>
|
||||
<div class="dot" style="--i:2;"></div>
|
||||
<div class="dot" style="--i:3;"></div>
|
||||
<div class="dot" style="--i:4;"></div>
|
||||
<div class="dot" style="--i:5;"></div>
|
||||
<div class="dot" style="--i:6;"></div>
|
||||
<div class="dot" style="--i:7;"></div>
|
||||
<div class="dot" style="--i:8;"></div>
|
||||
<div class="dot" style="--i:9;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue