CSS3实现div从下往上滑入滑出效果示例


Posted in HTML / CSS onApril 28, 2020

1,首先需要用的是 CSS3的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素。
2,CSS3 的 transition 动画,这里不做详细介绍

看一下效果图:

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

CSS3实现div从下往上滑入滑出效果示例
CSS3实现div从下往上滑入滑出效果示例

直接上代码:

<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
    <div id="volet">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
        <p>vero labore voluptates necessitatibus ut? Et</p>
        <p>vero labore voluptates necessitatibus ut? Et</p>
        <p>vero labore voluptates necessitatibus ut? Et</p>
        <p>vero labore voluptates necessitatibus ut? Et</p>

        <a href="#volet"  aria-hidden="true" class="ouvrir">滑出</a>
        <a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
    </div>
</div>
<style>
        #volet_clos {position: fixed;top: 0px; left: 0;width: 100%;}
        #volet {width: 250px;padding: 10px;background: #6B9A49; color: #fff;width: 100%;}
        /* 初始定位 */
        #volet {position: absolute;left: 0px;top: 375px;transition: all .5s ease-in;}   
        #volet a.ouvrir,#volet a.fermer {position: absolute;right: -88px;top: 150px;}
        /* 点击过后改变 target  */
        #volet a.fermer {display: none;}
        #volet:target {left: 0px;top: 150px;}
        #volet:target a.fermer {display: block;}
        #volet:target a.ouvrir {display: none;}
        #volet_clos:target #volet {left: 0px;top: 375px;}
        #volet a.ouvrir,#volet a.fermer{position: absolute;right: calc(40%);top: -40px;padding: 10px 25px; background: #555; color: #fff; text-decoration: none;text-align: center; width: 120px;}
    </style>

案例二,tab标签页切换效果

CSS3实现div从下往上滑入滑出效果示例 
 

CSS3实现div从下往上滑入滑出效果示例 
 

CSS3实现div从下往上滑入滑出效果示例

<h1>tab标签页切换效果</h1>
<div class="swiper-box">
    <div class="swiper-cont">
        <div class="swiper1" id="swiper1"></div>
        <div class="swiper2" id="swiper2"></div>
        <div class="swiper3" id="swiper3"></div>
    </div>
    <div class="swiper-num">
        <a href="#swiper1">1</a>
        <a href="#swiper2">2</a>
        <a href="#swiper3">3</a>
    </div>
</div>
/* tab标签页切换效果 css */
.swiper-box{position: relative;width: 500px; height: 300px; margin: 20px auto; background: #f1f1f1;}
.swiper-cont div,.swiper1,.swiper2,.swiper3{ width: 0%; height: 300px;position: absolute;top: 0; left: 0;transition: width .5s linear;}
.swiper1{background: linear-gradient(to top, #fba555, #ffed6c 75%);}
.swiper2{background: linear-gradient(to left, #55d5fb, #fd74a7 75%);}
.swiper3{background: linear-gradient(to top left, #55fb69, #6cfff1  75%);}
.swiper-num{position: absolute; bottom: 0;right: 0;display: inline-block;z-index: 9;}
.swiper-num a{display: inline-block;margin-left: 10px;padding: 10px 20px; color: #333;font-size: 14px; text-decoration: none;font-weight: bold;background: rgba(255,255,255,.45);}
.swiper-num a:hover,.swiper-num a:active{ color: red;cursor: pointer;background: rgba(255,255,255,.95);}
.swiper-box :target{width: 100%;transition: width .5s linear;}

到此这篇关于CSS3实现div从下往上滑入滑出效果示例的文章就介绍到这了,更多相关CSS3实现div从下往上滑入滑出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 #HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 #HTML / CSS
CSS实现聊天气泡效果
Apr 26 #HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
You might like
php zend 相对路径问题
2009/01/12 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
银行简历自我评价
2014/02/11 职场文书
武夷山导游词
2015/02/03 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Go语言空白表示符_的实例用法
2021/07/04 Golang