CSS3 实现侧边栏展开收起动画


Posted in HTML / CSS onDecember 22, 2014

@keyframes

规则用于创建动画。

@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

      规定动画的名称
      规定动画的时长

animation

animation 属性是一个简写属性,用于设置动画属性:

animation-name:规定 @keyframes 动画的名称。
animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function:规定动画的速度曲线。默认是 "ease"。
animation-delay:规定动画何时开始。默认是 0
animation-iteration-count:规定动画被播放的次数。默认是 1。
animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode:规定对象动画时间之外的状态

侧边栏实现

复制代码
代码如下:

/* 动画定义 */
@-webkit-keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}
@keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}
@-webkit-keyframes move_left {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translateX(-120px);
transform: translateX(-120px);
}
}
@keyframes move_left {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translateX(-120px);
transform: translateX(-120px);
}
}
@-webkit-keyframes move_up {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(-250px);
transform: translateY(-250px);
}
}
@keyframes move_up {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(-250px);
transform: translateY(-250px);
}
}

复制代码
代码如下:

/* 动画绑定 */
.move_right {
-webkit-animation-name : move_right;
animation-name : move_right;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.move_left {
-webkit-animation-name : move_left;
animation-name : move_left;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.move_up {
-webkit-animation-name : move_up;
animation-name : move_up;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.fadeIn {
-webkit-transform : translateX(120px);
transform : translateX(120px);
opacity: 1;
}
.fadeInUp {
-webkit-transform : translateY(-250px);
transform : translateY(-250px);
opacity: 1;
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
transition :transform .2s ease-out, opacity .2s ease-out;
}
.fadeOutLeft {
-webkit-transform : translateX(-120px);
transform : translateX(-120px);
opacity: 0.0;
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
transition :transform .2s ease-out, opacity .2s ease-out;
}

html

复制代码
代码如下:

<!doctype html>
<html lang="en" class="fullHeight">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="sidebar.css">
</head>
<body class="fullHeight">
<div class='sidebar fullHeight'>sidebar</div>
<div class="controller">
<div>
<button onclick="fadeIn()">淡进</button>
<button onclick="fadeOut()">淡出</button>
</div>
<div>
<button onclick="fadeInUp()">向上淡进</button>
<button onclick="fadeOutLeft()">向左淡出</button>
</div>
</div>
<script src="sidebarEffects.js"></script>
</body>
</html>

加入JS

复制代码
代码如下:

<script>
var sidebarEl = document.querySelector(".sidebar");
function fadeIn (e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '0px';
sidebarEl.style.left = '0px';
sidebarEl.classList.add('move_right');
}
function fadeOut (e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_left');
}
function fadeInUp(e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '250px';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_up');
}
function fadeOutLeft(e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '0px';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_left');
}
</script>

以上就是使用CSS3制作侧边栏动画效果的全部内容和代码了,小伙伴们根据自己的项目需求来改善美化下就可以了哦。

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
小程序实现录音功能
2020/09/22 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python中如何添加自定义模块
2020/06/09 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
党员教师工作决心书
2014/03/13 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL