Javascript Index.html样式在加载应用程序根目录之前不处于活动状态
这现在毫无意义。我只是尝试在身体加载angular 4应用程序时显示椭圆动画。文本将显示，但动画在加载根之后才处于活动状态。我甚至可以让我的“中心所有”类正常工作，但动画不行。有什么问题吗Javascript Index.html样式在加载应用程序根目录之前不处于活动状态,javascript,html,css,angular,Javascript,Html,Css,Angular,这现在毫无意义。我只是尝试在身体加载angular 4应用程序时显示椭圆动画。文本将显示，但动画在加载根之后才处于活动状态。我甚至可以让我的“中心所有”类正常工作，但动画不行。有什么问题吗 <!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" /> <
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>ClearGUIWeb</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript"></script>
<style>
.center-all {
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loading {
font-size: 40px;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
animation: ellipsis steps(4,end) 1200ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0px;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
</style>
</head>
<body>
<div class="center-all">
<div class="loading">Loading</div>
</div>
<app-root></app-root>
</body>
</html>
ClearGUIWeb
.全部居中{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
转换：-webkit翻译（-50%，-50%）；
转换：-moz-translate（-50%，-50%）；
转换：-ms转换（-50%，-50%）；
}
.装货{
字体大小：40px；
}
.装货：在{
溢出：隐藏；
显示：内联块；
垂直对齐：底部对齐；
-webkit动画：省略号步骤（4，结束）1200ms无限；
动画：省略号步骤（4，结束）1200ms无限；
内容：省略号字符的“\2026”/*ascii代码*/
宽度：0px；
}
@关键帧省略{
到{
宽度：1.25em；
}
}
@-webkit关键帧省略号{
到{
宽度：1.25em；
}
}
加载
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
app-root:empty::after {
content: 'Loading…';
width: 100px;
height: 100px;
position: absolute;
display: block;
top: 50%;
left: 50%;
font-size: 20px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<app-root></app-root>
</body>
</html>
应用程序根目录：空：：之后{
内容：“加载…”；
宽度：100px；
高度：100px；
位置：绝对位置；
显示：块；
最高：50%；
左：50%；
字体大小：20px；
转换：翻译（-50%，-50%）；
}