html左侧菜单展开与收起,CSS3 实现侧边栏展开收起动画
@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
复制代码代码如下:
demo
淡进
淡出
向上淡进
向左淡出
加入JS
复制代码代码如下:
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');
}
以上就是使用CSS3制作侧边栏动画效果的全部内容和代码了,小伙伴们根据自己的项目需求来改善美化下就可以了哦。
html左侧菜单展开与收起,CSS3 实现侧边栏展开收起动画相关推荐
- 收起 展开 循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
- Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 1. 在侧边栏内部,在侧边栏菜单区 ...
- vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开 在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
- 一个web左侧菜单例子
一 左侧菜单简介并更换图标 图图: 码码: <link rel="stylesheet" type="text/css" href="js/tr ...
- Axure绘制左侧菜单
Axure绘制左侧菜单 前言 问题描述 解决方案 1.先拉一个动态面板作为菜单 2.双击动态面板,添加层 3.添加交互效果 4.点击预览查看效果 前言 以后可能会用到Axure进行项目的初步设计,所以 ...
- b站黑马Vue2后台管理项目笔记——(2)主页布局(整体,Header,左侧菜单布局)
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: e.g.点击二级菜单用户列表,就会跳转到用户列表对应的index的地址(用户 ...
- vue首页导航+左侧菜单
目录 1. Mock.js:是什么? 2. Mock.js使用步骤 3. 后台首页AppMain.vue的创建 1. Mock.js:是什么? 1,前后端分离之后,前端迫切需要一种机制,不再需要依赖 ...
- react 树形菜单_关于React 使用antd组件递归实现左侧菜单导航树(MenusTree)的示例...
一.菜单组件Demo 这里本人采用的是蚂蚁金服(antd)组件库里的{Menu}组件写的一个左侧菜单树的小Demo(整套开发环境是React+Redux+webpack) import React f ...
- dedecms后台左侧菜单500错误怎么处理
前面dedecms后台左侧菜单空白不显示怎么处理,但有些网友还是反应说不能显示,提示500错误,这可能是iis配置或apache设置不正确有关,一般是正常的.但是,既然问题出现了,我们还是要去解决.下 ...
最新文章
- tensorflow 安装_tensorflow安装
- SQL常用字符串函数
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)G GCD Guessing Game
- submit()提交表单时,显示警示框
- Android文件存储方式之openFileOutput与获取数据openFileInput
- 使用混合多云每个人都应避免的3个陷阱(第1部分)
- Tensorflow中查看gpu是否可用
- 你准备好了吗,江湖来了
- itext html 转换pdf后 字体加粗,HTML转PDF字体的坑搞了半天
- allegro 自定义快捷键
- 软件调试实战(软件调试权威指南)
- 2022年数维杯国际数模赛浅评
- JavaWeb_AjaxJson
- 如何成为合格的LINUX系统管理员(ZZ)
- 04-如何选购台式电脑显卡?小白装机通俗易懂的独立显卡知识指南
- 亮剑精神”之疯狂高考
- 从一副去掉大小王的 52 张扑克牌中,请写出代码,用随机抽样的方法,分别估计出现 炸弹、顺子 (5张)、同花顺 (3 张)的概率。请使用自己的学号作为种子,得出最后的估计结果。
- 计算机组成原理实验tec2000,计算机组成原理实验手册(TEC2000)
- 不要轻易使用第三方软件搬运C盘大文件
- 程序员当上项目经理的时候!来看看项目经理的素质模型!