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实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
css3 文字断裂效果
Apr 22 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将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
购房意向书
2014/04/01 职场文书
国际贸易专业求职信
2014/06/04 职场文书
社区文艺活动方案
2014/08/19 职场文书
2014年教学工作总结
2014/11/13 职场文书
负责培养人意见
2015/06/05 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
详解Redis复制原理
2021/06/04 Redis
Python中可变和不可变对象的深入讲解
2021/08/02 Python