扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >怎么使用CSS3实现侧边栏展开收起动画
  • 914

0
分享到

怎么使用CSS3实现侧边栏展开收起动画

2024-04-02 19:04:59 914人浏览 独家记忆
摘要

这篇文章主要介绍了怎么使用css3实现侧边栏展开收起动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。@keyframes规则用于创建动画。

这篇文章主要介绍了怎么使用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

复制代码

代码如下:


<!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实现侧边栏展开收起动画”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!

--结束END--

本文标题: 怎么使用CSS3实现侧边栏展开收起动画

本文链接: https://lsjlt.com/news/89122.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么使用CSS3实现侧边栏展开收起动画
    这篇文章主要介绍了怎么使用CSS3实现侧边栏展开收起动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。@keyframes规则用于创建动画。...
    99+
    2024-04-02
  • CSS3怎么实现侧边栏展开收起动画
    这篇文章主要讲解了“CSS3怎么实现侧边栏展开收起动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3怎么实现侧边栏展开收起动画”吧！@keyfram...
    99+
    2024-04-02
  • 纯CSS3如何实现移动端展开和收起效果
    这篇文章给大家分享的是有关纯CSS3如何实现移动端展开和收起效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。展示效果：HTML代码<section class="block"...
    99+
    2023-06-08
  • 用CSS3+HTML5+JS 怎么实现块的收缩与展开的动画效果
    ...
    99+
    2023-06-08
  • react怎么实现侧边栏联动头部导航栏效果
    本文小编为大家详细介绍“react怎么实现侧边栏联动头部导航栏效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“react怎么实现侧边栏联动头部导航栏效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。项目中使用...
    99+
    2023-07-05
  • 怎么用CSS3实现按钮边框动画特效
    本篇内容主要讲解“怎么用CSS3实现按钮边框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现按钮边框动画特效”吧!这是一款效果非常炫酷的...
    99+
    2024-04-02
  • 实例讲解怎么用vue实现一个侧边栏拖动功能
    Vue 是一款流行的 JavaScript 框架，可以让开发者快速构建现代、响应式的 Web 应用程序。其中很有趣的一个功能是侧边栏拖动，这是一项非常流行和实用的功能，本文将介绍如何使用 Vue 实现侧边栏拖动。首先，需要安装 Vue.js...
    99+
    2023-05-14
  • 如何使用CSS3实现SVG路径描边动画效果
    这篇文章将为大家详细讲解有关如何使用CSS3实现SVG路径描边动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。不依赖javascript，直接使用纯css实现 svg 的描边绘制动画效果，效果演示动...
    99+
    2023-06-08
  • 使用css3怎么实现一个六边形边框
    使用css3怎么实现一个六边形边框？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。实现代码：HTML代码<div class="boxF...
    99+
    2023-06-08
  • 怎么用css3实现动画的暂停和重新开始
    本篇内容介绍了“怎么用css3实现动画的暂停和重新开始”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！CSS...
    99+
    2024-04-02
  • 怎么使用css3实现动画下拉菜单效果
    这篇文章给大家分享的是有关怎么使用css3实现动画下拉菜单效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。.site-navigation ul ul{min-width: 1...
    99+
    2024-04-02
  • 使用CSS3怎么实现一个粒子动画效果
    本篇文章给大家分享的是有关使用CSS3怎么实现一个粒子动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。按钮点击粒子动画<div class="b...
    99+
    2023-06-08
  • 怎么用CSS3实现进度加载动画
    本篇内容主要讲解“怎么用CSS3实现进度加载动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现进度加载动画”吧!先看看效果图：CSS Code...
    99+
    2024-04-02
  • 怎么在css3中使用less实现一个星空动画
    这期内容当中小编将会给大家带来有关怎么在css3中使用less实现一个星空动画，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。首先html文件结构很简单，如下：<div>  ...
    99+
    2023-06-08
  • 怎么用纯css3实现炫酷的动画背画特效
    本篇内容介绍了“怎么用纯css3实现炫酷的动画背画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　之...
    99+
    2024-04-02
  • 怎么用CSS3画出小黄人并实现动画效果
    这篇文章主要介绍“怎么用CSS3画出小黄人并实现动画效果”，在日常操作中，相信很多人在怎么用CSS3画出小黄人并实现动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么...
    99+
    2024-04-02
  • 怎么用css3实现loading加载动画效果
    这篇文章主要介绍“怎么用css3实现loading加载动画效果”，在日常操作中，相信很多人在怎么用css3实现loading加载动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • 怎么用纯CSS3实现动画按钮效果
    这篇文章主要介绍了怎么用纯CSS3实现动画按钮效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。HTML代码：<div class=&...
    99+
    2024-04-02
  • 微信小程序怎么实现text文本的展开与收起
    这篇文章主要介绍了微信小程序怎么实现text文本的展开与收起 的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序怎么实现text文本的展开与收起 文章都会有所收获，下面我们一起来看看吧。先看看布局文件，关...
    99+
    2023-06-26
  • 怎么在ViewPager中使用Fragment实现侧滑导航栏
    这期内容当中小编将会给大家带来有关怎么在ViewPager中使用Fragment实现侧滑导航栏，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。Activity：package com.exampl...
    99+
    2023-06-15
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作