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 相关文章推荐
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
css3 选择器
May 11 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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获取MSN好友列表类的实现代码
2013/06/23 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php画图实例
2014/11/05 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
教你学会使用Python正则表达式
2017/09/07 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python实现Zabbix-API监控
2018/09/17 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python学生管理系统的实现
2020/04/05 Python
宿舍保安职务说明书
2014/02/25 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL