建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS3 实现侧边栏展开收起动画

更新时间:2016-12-30整理编辑:建站学习网阅读:0

   规则用于创建动画。

  @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

  代码如下:

  sidebar

  淡进

  淡出

  向上淡进

  向左淡出

  加入JS

  代码如下:

  以上就是使用CSS3制作侧边栏动画效果的全部内容和代码了,小伙伴们根据自己的项目需求来改善美化下就可以了哦。

本文网址:https://www.dedexuexi.com/divcss/jc/1673.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
CSS教程:CSS的Background Images背景图片
« 上一篇2016年12月30日
CSS的一些必记属性整理
2016年12月30日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询