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的@media来编写响应式的页面
Nov 01 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 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过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
总结对比php中的多种序列化
2016/08/28 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
pywinauto自动化操作记事本
2019/08/26 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
高职教师岗位职责
2013/12/24 职场文书
洗发露广告词
2014/03/14 职场文书
个性发展自我评价2015
2015/03/09 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Java 数组的使用
2022/05/11 Java/Android