css3上下显示

CSS3中提供了一种新的特性，可以让元素上下显示。这个特性非常实用，尤其是在制作导航栏和菜单时经常用到。下面我们来看看如何实现这个功能。

代码如下：/* 设置容器的宽度和高度 */.container {
    width: 300px;
    height: 300px;
}
/* 设置每个项目的样式 */.item {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
/* 设置第一个项目的样式 */.item:first-child {
    background-color: #f00;
}
/* 设置第二个项目的样式 */.item:nth-child(2) {
    background-color: #0f0;
}
/* 设置第三个项目的样式 */.item:last-child {
    background-color: #00f;
}
/* 鼠标放在项目上时的样式 */.item:hover {
    transform: translateY(50px);
}
    

在这个例子中，我们首先定义了一个容器，接着用绝对定位的方式将项目放在容器的顶部。当鼠标放在项目上时，通过transform: translateY(50px)的方式让项目向下移动50px，形成了上下显示的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！