Html 如何在div中设置这些div的动画？
我正在尝试建立一个响应性强的3柱网格。在这方面没有问题。这个问题的出现是因为我希望有两个div，每个div的顶部和底部都有内容。我无法添加图像，但如果您想更好地理解我的意思，可以复制并粘贴以下链接： 我可以有两个顶部和底部的盒子，但是，交易如下：Html 如何在div中设置这些div的动画？,html,css,Html,Css,我正在尝试建立一个响应性强的3柱网格。在这方面没有问题。这个问题的出现是因为我希望有两个div，每个div的顶部和底部都有内容。我无法添加图像，但如果您想更好地理解我的意思，可以复制并粘贴以下链接： 我可以有两个顶部和底部的盒子，但是，交易如下： 我希望顶部的盒子在装载时完全隐藏起来 我希望底部的盒子在装载时部分隐藏 我希望这两个框显示和交换悬停的位置，所以底部框将在顶部和顶部框将在底部 我希望两个盒子在改变位置时都能改变颜色 我希望它能跨浏览器工作 所以，我在代码方面做了很多工作，我做到了：
#网格{
最大宽度：1000px；
保证金：20px自动；
填充：0 20px
}
#格力{
显示：块；
宽度：300px；
高度：220px；
利润率：8px；
浮动：左；
溢出：隐藏；
边框：1px实心#ccc；
}
.库克先生{
背景：#333URL（images/th1.jpg）
}
.电脑{
背景：#555URL（images/th2.jpg）
}
.瑜伽{
背景：777URL（images/th3.jpg）
}
布莱克特兰斯先生{
过渡：0.8秒，全部缓进缓出；
-webkit过渡：0.8s全易入易出；
z指数：10000；
显示：块；
背景：rgba（255，255，255，0.8）；
颜色：#333；
填充物：5px；
宽度：100%；
高度：40px；
z指数：1000；
位置：绝对位置；
顶部：180像素；
}
.blacktrans:悬停{
显示：块；
背景：rgba（0,0,0,0.8）；
排名：0；
高度：80px
}
.鲑鱼{
过渡：0.8秒，全部缓进缓出；
-webkit过渡：0.8s全易入易出；
显示：块；
宽度：100%；
高度：60px；
背景：rgba（0,51,102,0.8）；
颜色：#fff；
字体大小：24px；
位置：绝对位置；
顶部：-180px；
}
.鲑鱼.价格{
字体大小：24px；
填充：10px
}
.classbox{
显示：块；
宽度：300px；
高度：220px；
位置：相对位置；
过渡：0.8秒，全部缓进缓出；
-webkit过渡：0.8s全易入易出；
填充顶部：180px；
}
.classbox:悬停{
不透明度：1；
填充顶部：0；
}
.blacktrans h3{
字体大小：20px；
}
.blacktrans h3 a{
颜色：#333；
填充：0 5px；
}
.classbox.鲑鱼{
顶部：160px；
}
.classbox:hover.blacktrans h3 a{
颜色：#fff；
填充：0 5px；
}
.时间{
颜色：#3498db；
字号：18px；
文本对齐：左对齐；
填充：0 5px；
}
.西莫{
宽度：9px；
高度：15px；
位置：绝对位置；
顶部：10px；
右：5px；
不透明度：0；
过渡期：1.5s，轻松进出
}
.classbox:hover>.blacktrans>。请参阅更多{
不透明度：1；
}
.boxbg{
显示：内联块；
宽度：100%；
身高：100%；
位置：绝对位置；
底部：0；
左：0；
z指数：0；
}
-
6:30@7:00下午
20美元
-
下午4:30@5:30
30美元
-
6:30@7:00下午
40美元
-
6:30@7:00下午
20美元
-
下午4:30@5:30
30美元
-
6:30@7:00下午
40美元
-
6:30@7:00下午
20美元
-
下午4:30@5:30
30美元
-
6:30@7:00下午
40美元
-
6:30@7:00下午
20美元
-
下午4:30@5:30
30美元
-
6:30@7:00下午
40美元
#grid {
max-width:1000px;
margin:20px auto;
padding:0 20px
}
#grid li {
display:block;
width:300px;
height: 220px;
margin:10px 8px;
float:left;
overflow:hidden;
border:1px solid #ccc;
}
.cook {
background:#333 url(images/th1.jpg)
}
.computer {
background:#555 url(images/th2.jpg)
}
.yoga {
background:#777 url(images/th3.jpg)
}
.blacktrans {
transition:0.8s all ease-in-out;
z-index:10000;
display:block;
background:rgba(255, 255, 255, 0.8);
color:#333;
padding:0 5px;
width:100%;
height:40px;
z-index:1000;
position:absolute;
top:180px;
}
.classbox:hover > .blacktrans {
display:block;
background:rgba(0, 0, 0, 0.8);
top:0;
height:80px
}
.salmon {
transition:0.8s all ease-in-out;
display:block;
width:100%;
height:60px;
background:rgba(0, 51, 102, 0.8);
color:#fff;
font-size:24px;
position:absolute;
top:-180px;
}
.salmon .price {
font-size:24px;
padding:10px
}
.classbox {
display:block;
width:300px;
height:220px;
position:relative;
transition:0.8s all ease-in-out;
padding-top:180px;
}
.classbox:hover {
opacity:1;
padding-top:0;
}
.blacktrans h3 {
font-size:20px;
padding:0;
margin:5px auto;
text-transform:uppercase;
}
.blacktrans h3 a {
color:#333;
padding:0 5px;
text-decoration:none;
}
.classbox:hover > .salmon {
top:160px;
}
.classbox:hover > .blacktrans h3 a {
color:#fff;
padding:0 5px;
}
.time {
color:#3498db;
font-size:18px;
text-align:left;
padding:0 5px;
}
.seemore {
width:9px;
height:15px;
position:absolute;
top:10px;
right:5px;
opacity:0;
transition:1.5s all ease-in-out
}
.classbox:hover > .blacktrans > .seemore {
opacity:1;
}
.boxbg {
display:inline-block;
width:100%;
height:100%;
position:absolute;
bottom:0;
left:0;
z-index:0;
}
.classbox：hover