多个div的css,使用多个CSS类一起<div></div>

每个类都在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代码：

任何帮助，将不胜感激。

2016-08-17

Hadi

+1

我很抱歉你的问题不明确。你能否尝试多解释一下你想达到的目标？你可以使用截图它有帮助 –

+0

我想动画[链接](http://www.hilux-co.com/index.php/about-us)但是当我做动画时，每个图像之间的距离一个行发生。具体如下： '

' –

+0

你好，我 问题解决了。 通过在CSS代码中放入'display：inline-block' –