Question

我想一起使用多个css类

每个类都在HTML中引入，如下所示：

通过这样做，每个班级连续，我不想要。我想在后面连续走到一起。

每个类都是动画;这样做，每个段落和段落

占据了很多空间。

css代码：

.OT_below0 
{
border-radius:0px 0px 0px 0px;
border:solid transparent;
border:solid rgba(255,255,255,0);
border-width:0px 0px 0px 0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
background:url("http://localhost/OTA/templates/OT/images/Index1.jpg") no-repeat fixed center center / cover;
background-attachment:fixed;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
height:700px;
}
 .spk1{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark1.png");
animation:spk1 30s infinite;
}
/* Standard syntax */
@keyframes spk1 {
0%  {left:-1100px;top:10px;}
33%  {left:-10px;top:600px;}
66%  {left:-1100px;top:10px;}
100%  {left:-10px;top: 600px;}
}
.spk2
{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark2.png");
animation: spk2 50s infinite;
-webkit-animation: spk2 50s infinite; /* Chrome, Safari, Opera */
}
/* Standard syntax */
@keyframes spk2 {
0%  {left:-1100px;top:10px;}
33%  {left:-10px;top:600px;}
66%  {left:-1100px;top:10px;}
100%  {left:-10px;top: 600px;}
}
.spk3
{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark3.png");
animation: spk3 60s infinite;
-webkit-animation: spk3 60s infinite; /* Chrome, Safari, Opera */
}
/* Standard syntax */
@keyframes spk3 {
0%  {left:0px;top:0px;}
33%  {left:-1100px;top:500px;}
66%  {left:-1100px;top:10px;}
100%  {left:10px;top: -600px;}
}
.spk4
{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark4.png");
animation: spk4 120s infinite;
-webkit-animation: spk4 120s infinite; /* Chrome, Safari, Opera */
}
/* Standard syntax */
@keyframes spk4 {
0%  {left:0px;top:230px;}
33%  {left:-1300px;top:290px;}
66%  {left:100px;top:210px;}
100%  {left:1250px;top: 250px;}
}
.spk5
{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark5.png");
animation: spk5 200s infinite;
-webkit-animation: spk5 200s infinite; /* Chrome, Safari, Opera */
}
/* Standard syntax */
@keyframes spk5 {
0%  {left:-1300px;top:260px;}
50%  {left:50px;top:400px;}
100%  {left:-1300px;top: 600px;}
}
.spk6
{
width: 99px;
height: 99px;   
position: relative;
background-image:url("http://localhost/OTA/templates/OT/images/spark6.png");
animation: spk6 150s infinite;
-webkit-animation: spk6 150s infinite; /* Chrome, Safari, Opera */
}
/* Standard syntax */
@keyframes spk6 {
0%  {left:0px;top:650px;}
33%  {left:-1300px;top:10px;}
66%  {left:150px;top:30px;}
100%  {left:-1350px;top: 650px;}
}

HTML code：

<div class="OT_below0"> </div>
<div class="custom"> </div>
<div class="spk1"> </div>
<div class="spk2"> </div>
<div class="spk3"> </div>
<div class="spk4"> </div>
<div class="spk5"> </div>
<div class="spk6"> </div>
<p style="text-align: center;"><a title="network" href="xx"><img  src="images/social/xx.png" alt="netw" width="90" height="90" /></p>

任何帮助都将不胜感激。

Answer 1

首先：您必须将一般属性CSS设置为关键帧，例如：

app.UseDeveloperExceptionPage()

您可以通过以下方式为动画设置多关键帧：

@keyframes spkGeneral {
0%  {left:-1100px;top:10px;}
33%  {left:-10px;top:600px;}
66%  {left:-1100px;top:10px;}
100%  {left:-10px;top: 600px;}
}

将多个css类一起使用到<div> </div>

1 个答案: