css上下滑动动画效果代码

CSS3作为前端开发中很重要的一环，它不仅可以制作精美的界面，还可以制作各种酷炫的动画效果。今天，我们来分享一下如何使用CSS3制作一个上下滑动动画效果。

首先，我们需要定义一个卡片容器，代码如下：

.card-container {
    width: 500px;
    height: 200px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
} 

在卡片容器内部，我们需要定义一个卡片，代码如下：

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-in-out;
} 

接下来，我们需要定义两个卡片，一个是正常状态的卡片，一个是上滑动后的卡片。我们通过设置transform属性实现上下滑动的动画效果。代码如下：

.card {
    /* 正常状态 */
    transform: translateY(0%);
}
.card.up {
    /* 上滑动状态 */
    transform: translateY(-100%);
} 

最后，我们需要通过JavaScript来实现动画效果的触发。当我们点击卡片时，卡片就会向上滑动，代码如下：

var card = document.querySelector('.card');
card.addEventListener('click', function() {
    card.classList.toggle('up');
}); 

至此，我们就完成了一个简单的CSS3上下滑动动画效果。你也可以根据自己的需求进行修改和扩展。希望本文对你有所帮助。