我有一个要呈现的错误成分
该页面可以运行文件,但是为了使组件正确显示内容,我必须在主体上应用一些全局CSS。
body{
background: #ff7300;
color:#fff;
font-family: 'Open Sans', sans-serif;
max-height:700px;
overflow: hidden;
}
如果我使用环绕式div,它将无法正常工作。
最大高度设置不正确,我的动画仅在应用全局主体css时有效。
以下是一些我的动画示例:
.x1_5{
top:-80px;
left:250px;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
-webkit-animation: moveclouds 17s linear infinite;
-moz-animation: moveclouds 17s linear infinite;
-o-animation: moveclouds 17s linear infinite;
}
.x2 {
left: 250px;
top:30px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: 250px; bottom: -70px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.8;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
<div className="error">
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x1_5"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class='c'>
<div class='_404'>404</div>
<hr></hr>
<div class='_1'>THE PAGE</div>
<div class='_2'>WAS NOT FOUND</div>
<a class='btn' href='#'><span>BACK TO SAFETY </span>
</a>
</div>
</div>
使用正文CSS的问题是,它适用于渲染404页面的主要组件。
这是反应路线,我正在主要App.js组件中渲染
<Switch>
<Route path="*" exact={true} component={ErrorPage}>
</Route>
</Switch>
有没有办法,我可以使css仅在呈现此组件时应用,或使其与包装的html标签一起使用。