核心属性
display: flex + justify-content: center + align-items: center 文字在页面中居中显示
animation + transform + animation-delay 文字逐个显隐的动画效果
-
<div class="start-screen">
-
<div class="loading">
-
<div class="loading__element el1">加</div>
-
<div class="loading__element el2">载</div>
-
<div class="loading__element el3">中</div>
-
<div class="loading__element el4">,</div>
-
</div>
-
<div class="loading">
-
<div class="loading__element el1">请</div>
-
<div class="loading__element el2">稍</div>
-
<div class="loading__element el3">候</div>
-
<div class="loading__element el4">.</div>
-
<div class="loading__element el5">.</div>
-
<div class="loading__element el6">.</div>
-
<div class="loading__element el7">.</div>
-
<div class="loading__element el8">.</div>
-
<div class="loading__element el9">.</div>
-
</div>
-
</div>
-
* {
-
margin: 0;
-
padding: 0;
-
border: 0;
-
box-sizing: border-box;
-
}
-
body {
-
background-color: #1fa2ed;
-
color: #fff;
-
}
-
.start-screen {
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
flex-flow: nowrap column;
-
min-height: 100vh;
-
}
-
.loading {
-
display: flex;
-
margin: 24px 0;
-
}
-
.loading__element {
-
font: normal 100 1.5rem/1 "NSimSun";
-
letter-spacing: .5em;
-
}
-
[class*="el"] {
-
animation: bouncing 2s infinite ease;
-
}
-
.el1 {
-
animation-delay: 0.1s;
-
}
-
.el2 {
-
animation-delay: 0.2s;
-
}
-
.el3 {
-
animation-delay: 0.3s;
-
}
-
.el4 {
-
animation-delay: 0.4s;
-
}
-
.el5 {
-
animation-delay: 0.5s;
-
}
-
.el6 {
-
animation-delay: 0.6s;
-
}
-
.el7 {
-
animation-delay: 0.7s;
-
}
-
.el8 {
-
animation-delay: 0.8s;
-
}
-
.el9 {
-
animation-delay: 0.9s;
-
}
-
@keyframes bouncing {
-
0%, 100% {
-
transform: scale3d(1, 1, 1);
-
}
-
50% {
-
transform: scale3d(0, 0, 1);
-
}
-
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 圆环旋转加显隐的加载效果
- 实现点击按钮后CSS加载效果
- 炫酷的圆环加载及数字滚动效果(上)
- 炫酷的圆环加载及数字滚动效果(下)
- 使用Infinite Ajax Scroll实现下拉加载效果
- 介绍同步加载、异步加载、延迟加载[原创]
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
平台革命:改变世界的商业模式
[美]杰奥夫雷G.帕克(Geoffrey G. Parker)、马歇尔W.范·埃尔斯泰恩(Marshall W. Van Alstyne)、桑基特·保罗·邱达利(Sangeet Paul Choudary) / 志鹏 / 机械工业出版社 / 2017-10 / 65.00
《平台革命》一书从网络效应、平台的体系结构、颠覆市场、平台上线、盈利模式、平台开放的标准、平台治理、平台的衡量指标、平台战略、平台监管的10个视角,清晰地为读者提供了平台模式最权威的指导。 硅谷著名投资人马克·安德森曾经说过:“软件正在吞食整个世界。”而《平台革命》进一步指出:“平台正在吞食整个世界”。以平台为导向的经济变革为社会和商业机构创造了巨大的价值,包括创造财富、增长、满足人类的需求......一起来看看 《平台革命:改变世界的商业模式》 这本书的介绍吧!