Question

我试图在我的网站上获得一些CSS3效果我试图做的是：

HTML

<link rel="stylesheet" type="text/css" href="animate.css">
<div class="header">

<div class="header_box1">
<div class="small_header_box">2222222222 </div>
<div class="small_header_box"> 2222222222</div>
<div class="small_header_box">2222222222 </div>
<div class="small_header_box">2222222222 </div>
</div>


<div class="header_box2">
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
</div>


<div class="header_box3">
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
</div>
</div>

CSS

.header_box1{
 background-color: red;  
}

.header_box2{
 background-color: skyblue;  
}

.header_box3{
 background-color: yellow;  
}
.small_header_box{
 background-color: green;  
   width: 50px;  
    height: 50px; 

    float: left;
}


.header {  
    width: 1000px;  
    height: 300px;  
    margin: 25px auto;  
    overflow: hidden;  
    position: relative;  
    border: 1px solid #000;  
    margin: 25px auto;    

    background-color: #222;  

  -webkit-border-radius: 5px;  
  border-radius: 5px;  

  -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
}  


   .header div {  
    position: absolute;  
    font-family: Tahoma, Arial, sans-serif;  
    width: 100%;  
    height: 100%;  
    margin: 0;  
    line-height: 50px;  
    text-align: center;  
    color: #fff;  
  text-shadow: 1px 1px 0px #000000;  
  filter: dropshadow(color=#000000, offx=1, offy=1);  

   transform:translateX(100%);  
}  

@keyframes left-one {  
    0%  {  
        transform:translateX(100%);  
    }  
    3% {  
        transform:translateX(0);  
    }  
    30% {  
        transform:translateX(0);  
    }  
    31% {  
        transform:translateX(-100%);  
    }  
    99%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
}  
@keyframes left-two {  
    0% {  
        transform:translateX(100%);  
    }  
    33% {  
        transform:translateX(100%);  
    }  
    34% {  
        transform:translateX(0);          
    }  
    66% {  
        transform:translateX(0);          
    }  
    67%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
} 
@keyframes left-three {  
    0% {  
        transform:translateX(100%);  
    }  
    67% {  
        transform:translateX(100%);  
    }  
    68% {  
        transform:translateX(0);          
    }  
    98% {  
        transform:translateX(0);          
    }  
    99%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
}  

.header div:nth-child(1) {  
    animation: left-one 15s ease infinite;  
}  
.header div:nth-child(2) {  
    animation: left-two 15s ease infinite;  
}  
.header div:nth-child(3) {  
    animation: left-three 15s ease infinite;  
}

我想要做的是三个div是一个非停止动画，每个div包含四个不同的潜水。这里发生的是，Three Divs会动画，但 header_box（x） div中的四个div是不可见的。一个div获取所有可用空间，其余三个div不可见。我应该怎么做才能看到Header_box1，Header_box2，Header_box3中的所有四个div都可见。

Answer 1

你需要

为div设置height，每个div设置300px = 75px的4个div;
删除position: absolute;或者它们始终从0px开始，即使高度为：75px;
删除float: left;，这是无用的（并由position: absolute;覆盖）
从height: 100%;规则中移除.header div，否则将“赢得”.small_header_box规则。

当然还有其他问题，但作为从您的代码开始的概念证明（并且没有准确理解您想要实现的目标），请看一下：

http://jsfiddle.net/nuUm6/

Answer 2

对于班级为small_header_box的div，width:50px和height:50px未被采用，而width:100%和height:100%来自.header div拍摄。如果您将.header div更改为更具体的内容，您的问题就会得到解决。

<div class="header">
 <div class="firstLevel header_box1">
  <div class="small_header_box"></div>
  ... 
 </div>
 ....
</div>

和css

.header .firstLevel{
    position: absolute;  
    font-family: Tahoma, Arial, sans-serif;  
    width: 100%;  
    height: 100%;  
    margin: 0;  
    line-height: 50px;  
    text-align: center;  
    color: #fff;  
    text-shadow: 1px 1px 0px #000000;  
    filter: dropshadow(color=#000000, offx=1, offy=1);  
    transform:translateX(100%);
    -webkit-transform:translateX(100%);
}

此外，header_box1，2＆amp; 3中只有浮动元素。要使容器填满适当的空间，您可能需要添加一个浮动清空的空元素。

<div class="clearFl"></div>

和css

.clear{
 clear:both;
}

Answer 3

我不确定你究竟想要做什么，但我认为你的代码中的这一部分是“搞砸了”。

.header div {  
position: absolute;  
font-family: Tahoma, Arial, sans-serif;  
width: 100%;  
height: 100%;  
margin: 0;  
line-height: 50px;  
text-align: center;  
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
transform:translateX(100%);
}

通过这个你的目标所有div跟随父.eader类包括“小标题框”。看看那部分。

在另一个div内的Div不可见

3 个答案: