1

我试图在我的网站上获得一些 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 都包含四个不同的潜水。这里发生的情况是，三个 div 确实有动画效果，但header_box(x) div 中的四个 div 不可见。一个 div 获取所有可用空间，其余三个 div 不可见。我应该怎么做才能看到 Header_box1、Header_box2、Header_box3 中的所有四个 div。

4

3 回答 3

1

你需要

  • 为 div设置一个height，300px 中的 4 个 div = 每个 div 75px；
  • 删除position: absolute;，否则它们将始终从 0px 开始，即使 height: 75px;
  • remove float: left;，那是没用的（并被 覆盖position: absolute;）
  • height: 100%; 从规则中删除.header div，否则将“赢得”违反.small_header_box规则。

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

http://jsfiddle.net/nuUm6/

于 2013-02-21T13:42:42.343 回答
0

对于带有 class 的 div small_header_box，不采用 and ，而是width:50px采用and from 。如果您更改为更具体的内容，您的问题将得到解决。height:50pxwidth: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 &3内只有浮动元素。为了让容器填充适当的空间，您可能需要添加一个清除浮动的空元素。

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

和CSS

.clear{
 clear:both;
}
于 2013-02-21T11:23:23.970 回答
0

我不确定你到底想做什么，但我认为你的这部分代码“搞砸了”。

.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%);
}

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

于 2013-02-21T11:28:42.867 回答