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 相关文章推荐
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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实用函数分享之去除多余的0
2015/02/06 PHP
php图像处理类实例
2015/07/28 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python实现多进程的四种方式
2019/02/22 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python里dict变成list实例方法
2019/06/26 Python
Python内置函数property()如何使用
2020/09/01 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
入党自我评价范文
2014/02/02 职场文书
电气自动化求职信
2014/06/24 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
小学运动会开幕词
2015/01/28 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang