更新第77个小实例:滚动的方块loading动画
This commit is contained in:
parent
0173c1e778
commit
d66a0655be
|
@ -80,4 +80,5 @@
|
|||
73. HTML5+CSS3小实例之非常酷炫的拟物化滑动开关
|
||||
74. HTML5+CSS3小实例之仿制网易云音乐网站的轮播图
|
||||
75. HTML5+CSS3小实例之简约又高级的变色loading动画
|
||||
76. HTML5+CSS3小实例之旋转的圣诞树
|
||||
76. HTML5+CSS3小实例之旋转的圣诞树
|
||||
77. HTML5+CSS3小实例之滚动的方块loading动画
|
|
@ -0,0 +1,88 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
}
|
||||
.loader{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 自定义属性--c */
|
||||
--c: #48c0a3;
|
||||
}
|
||||
.loader .square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
/* 通过var函数调用自定义属性--c */
|
||||
background-color: var(--c);
|
||||
/* 阴影 外发光效果 */
|
||||
box-shadow: 0 0 15px var(--c),
|
||||
0 0 30px var(--c),
|
||||
0 0 60px var(--c);
|
||||
/* 设置旋转元素的基点位置 */
|
||||
transform-origin: bottom right;
|
||||
/* 执行动画: 动画名 时长 线性 无限次播放 */
|
||||
animation: roll 1s linear infinite;
|
||||
}
|
||||
/* 黑色遮罩(挖空方形) */
|
||||
.loader .square::before{
|
||||
content: "";
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* 绝对定位 居中 */
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
background-color: #000;
|
||||
/* 阴影 内发光效果 */
|
||||
box-shadow: inset 0 0 15px var(--c),
|
||||
inset 0 0 30px var(--c),
|
||||
inset 0 0 60px var(--c);
|
||||
}
|
||||
.loader .text{
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
left: -40px;
|
||||
bottom: -80px;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.loader .text p{
|
||||
color: var(--c);
|
||||
font-size: 24px;
|
||||
white-space: nowrap;
|
||||
/* 文字发光效果 */
|
||||
text-shadow: 0 0 2px var(--c),
|
||||
0 0 4px var(--c),
|
||||
0 0 8px var(--c);
|
||||
position: absolute;
|
||||
/* 默认移出可视范围 */
|
||||
left: 100%;
|
||||
/* 执行动画 */
|
||||
animation: move 3.5s linear infinite;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 方块旋转动画 */
|
||||
@keyframes roll {
|
||||
100%{
|
||||
transform: translateX(-100%) rotateZ(90deg);
|
||||
}
|
||||
}
|
||||
/* 文本移动动画 */
|
||||
@keyframes move {
|
||||
100%{
|
||||
left: -50%;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
<!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/77.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader">
|
||||
<div class="square"></div>
|
||||
<div class="text">
|
||||
<p>拼命加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue