css3如何向上_CSS3实现div从下往上滑入滑出效果示例

  • Post author:
  • Post category:其他


1,首先需要用的是 CSS3的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素。

2,CSS3 的 transition 动画,这里不做详细介绍

看一下效果图:

点击滑出按钮,元素从底部匀速滑入到页面一定高度;再点击滑入,元素从当前位置匀速滑入期初位置。

直接上代码:

CSS3滑入/滑出效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .

vero labore voluptates necessitatibus ut? Et

vero labore voluptates necessitatibus ut? Et

vero labore voluptates necessitatibus ut? Et

vero labore voluptates necessitatibus ut? Et


滑出


滑入

#volet_clos {position: fixed;top: 0px; left: 0;width: 10



版权声明:本文为weixin_31830389原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。