less之css3动画大方溢彩

.keyframes(@fx,@fy,@tx,@ty,@name){   //声明一个动画函数,只需要写一个函数就可以到处调用了
  @keyframes @name
  {
    from {
       transform:translate(@fx,@fy);
       opacity:0;
       filter:alpha(opacity=0);
    }
    to {
      transform:translate(@tx,@ty);
      opacity:1;
      filter:alpha(opacity=100);
    }
  }
  @-moz-keyframes @name /* Firefox */
  {
    from {
      -moz-transform:translate(@fx,@fy);
      opacity:0;
      filter:alpha(opacity=0);
    }
    to {
      -moz-transform:translate(@tx,@ty);
      opacity:1;
      filter:alpha(opacity=100);
    }
  }

  @-webkit-keyframes @name /* Safari 和 Chrome */
  {
    from {
      -webkit-transform:translate(@fx,@fy);
      opacity:0;
      filter:alpha(opacity=0);
    }
    to {
      -webkit-transform:translate(@tx,@ty);
      opacity:1;
      filter:alpha(opacity=100);
    }
  }

  @-o-keyframes @name /* Opera */
  {
    from {
      -o-transform:translate(@fx,@fy);
      opacity:0;
      filter:alpha(opacity=0);
    }
    to {
      -o-transform:translate(@tx,@ty);
      opacity:1;
      filter:alpha(opacity=100);
    }
  }
}

.animation(@animation-name,     //声明一个过渡函数,只需要声明一个函数就可以到处调用了
@animation-duration,
@animation-timing-function,
@animation-delay,
@animation-iteration-count,
@animation-direction)
{
  animation: @arguments;
  /* Firefox: */
  -moz-animation: @arguments;
  /* Safari 和 Chrome: */
  -webkit-animation: @arguments;
  /* Opera: */
  -o-animation: @arguments;
}

/*初始动画*/
  //banner--------------------------------------------------
.keyframes(0,-600px,0,0,animation1_1);//banner动画1
.keyframes(-421px,0,0px,0,animation1_2);//banner动画2,底部左1
.keyframes(183px,0,0px,0,animation1_3);//banner动画3,底部左2
//第二屏-------------------------------------------------------------
.keyframes(0,-326px,0px,0,animation2_1);//第一行
.keyframes(0,40px,0px,0,animation2_2);//第二行
//第三行
.keyframes(-610px,0,0px,0,animation2_3);
.keyframes(670px,0px,0px,0,animation2_4);
//第三屏-------------------------------------------------------------
.keyframes(0px,-300px,0px,0,animation3_1);
.keyframes(-700px,0,0px,0,animation3_2);
.keyframes(1145px,0,0px,0,animation3_3);
//第四屏
.keyframes(0px,-383px,0px,0,animation4_1);
.keyframes(0,-390px,0px,0,animation4_2);
.keyframes(-800px,0,0px,0,animation4_3);
.keyframes(800px,0,0px,0,animation4_4);
//第五屏

.keyframes(0px,-383px,0px,0,animation5_1);
.keyframes(0,390px,0px,0,animation5_2);
.keyframes(-800px,0,0px,0,animation5_3);
.keyframes(800px,0,0px,0,animation5_4);

/*执行动画过渡*/
  //banner---------------------------------------------
.animation .animation1_1{
  .animation(animation1_1,2s,ease-in-out,0s,1,normal)
}
.animation .animation1_2{
  .animation(animation1_2,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation1_3{
  .animation(animation1_3,2.5s,ease-in-out,0s,1,normal)
}

//第二屏-----------------------------------------------
.animation .animation2_1{                     //第一行
  .animation(animation2_1,1s,ease-in-out,0s,1,normal)
}
.animation .animation2_2{    //第二行
  .animation(animation2_2,3s,ease-in-out,0s,1,normal)
}
//第三行
.animation .animation2_3{
  .animation(animation2_3,3.5s,ease-in-out,0s,1,normal)
}
.animation .animation2_4{
  .animation(animation2_4,3.5s,ease-in-out,0s,1,normal)
}
//第三屏----------------------------------------------------------
.animation .animation3_1{          //第一行
  .animation(animation3_1,2.5s,ease-in-out,0s,1,normal)
}
//第二行
.animation .animation3_2{          //左边
  .animation(animation3_2,3s,ease-in-out,0s,1,normal)
}
//右边
.animation .animation3_3{          //左边
  .animation(animation3_3,3s,ease-in-out,0s,1,normal)
}
//第四屏-----------------------------------------------------------------
.animation .animation4_1{
  .animation(animation4_1,2s,ease-in-out,0s,1,normal)
}
.animation .animation4_2{
  .animation(animation4_2,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation4_3{
  .animation(animation4_3,3s,ease-in-out,0s,1,normal)
}

//第五屏
.animation .animation5_1{
  .animation(animation5_1,1.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_2{
  .animation(animation5_2,1.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_3{
  .animation(animation5_3,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_4{
  .animation(animation5_4,2.5s,ease-in-out,0s,1,normal)
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-31 01:31:09

less之css3动画大方溢彩的相关文章

CSS3学习(CSS3过渡、CSS3动画)

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果. 浏览器支持 属性 浏览器支持 @keyframes           animation           Internet Explo

CSS3动画:transition和animation(一)

1.浏览器支持情况 transform: transition: animation: 2.分别介绍他们的用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜,即可以改变元素的形状. 语法为transform: none|transform-functions;具体的方法参见 W3CSchool上的CSS3 transform 属性介绍 transition 属性是一个简写属性,用于设置四个过渡属性: transition-propert

CSS3——动画效果

CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~ 简单Demo: html代码: <div id="dv1"></div> CSS3代码: <style type="text/css"> #dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;} @webki

高性能 CSS3 动画

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况. 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方案:CSS