/*

定义圆角

@radius 圆角大小

*/

.round(@radius:5px){

    border-radius:@radius;

    -webkit-border-radius: @radius;

    -moz-border-radius: @radius;

}

.round7{

   .round(7px);

}

/*

盒子阴影

@right_left 右边阴影为正数 左边负数

@bottom_top 下边阴影为正数 上边负数

@box  阴影大小

@box_color 阴影颜色

*/

.boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){

    box-shadow:@arguments;

   -moz-box-shadow:@arguments;

   -webkit-box-shadow:@arguments;

}

.boxshadow7{

  .boxshadow(7px,7px,7px,black);

}

/*

文字阴影,可以指定多组阴影

@right_left1 右边阴影为正数 左边负数

@bottom_top1 下边阴影为正数 上边负数

@text  阴影大小

@text_color 阴影颜色

*/

.textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){

    text-shadow:@arguments;

}

.r_b_textshadow{

  .textshadow();

}

/*

透明度 或渐变 1为不透明 0透明

css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值

用来兼容所有浏览器

*/

.rgba(@rgba_a:.4,@rgb_b:40){

    filter: alpha(opacity=@rgb_b);

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})";

    opacity:@rgb_a;

}

.rgba4{

    .rgba();

}

/*

列布局

@c1 列数

@c2 列宽

@c3 列间距

@c4 边框样式

*/

.column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){

    column-count:@c1;

    column-width:@c2;

    column-gap:@c3;

    column-rule:@c4;

    -webkit-column-count:@c1;

    -webkit-column-width:@c2;

    -webkit-column-gap:@c3;

    -webkit-column-rule:@c4;

    -moz-column-count:@c1;

    -moz-column-width:@c2;

    -moz-column-gap:@c3;

    -moz-column-rule:@c4;

}

.my_column{

    .column(3,50px,3px,1px solid #ccc);

}

/*背景渐变

@start  渐变开始颜色

@end  结束颜色

*/

.bg(@start :#00ffff,@end :#9fffff){

    background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));

    background:-moz-linear-gradient(top,@start ,@end);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,

                endColorstr=@end ,grandientType=0);

}

.my_bg{

    .bg(red,yellow);

}

/*

画轮廓 就是内部框

@outline 样式

@outline1 间距 负数在内部

*/

.outline(@outline:1px solid #699,@outline1:-10px){

    outline:@outline;

    outline-offset:@outline1;

}

.my_outline{

    .outline();

}

/*

旋转角度

@ro定义度数

IE不支持 滤镜支持0，1，2，3

*/

.rotate(@ro :30deg){

        transform: rotate(@ro);

      -webkit-transform: rotate(@ro);

      -moz-transform: rotate(@ro);

      -o-transform: rotate(@ro);

      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.rotate50{

    .rotate(50deg);

}

/*

菱形旋转角度

@x横向缩放比例

@y纵向缩放比例

*/

.skew(@roX :30deg,@roY :30deg){

        transform: skew(@roX,@roY);

      -webkit-transform: skew(@roX,@roY);

      -moz-transform: skew(@roX,@roY);

      -o-transform: skew(@roX,@roY);

      -ms-transform: skew(@roX,@roY) ;

}

.skew30{

    .skew(50deg);

}

/*

放大缩小

@x横向缩放比例

@y纵向缩放比例

*/

.scale(@x :1.2,@y :1.2){

        transform: scale(@x,@y);

      -webkit-transform: scale(@x,@y);

      -moz-transform: scale(@x,@y);

      -o-transform: scale(@x,@y);

      -ms-transform: scale(@x,@y);

}

.my_scale{

      .scale();

}

/*

移动距离

@x横向移动距离

@y纵向移动距离

*/

.translate(@x :80px,@y :80px){

        transform: translate(@x,@y);

      -webkit-transform: translate(@x,@y);

      -moz-transform: translate(@x,@y);

      -o-transform: translate(@x,@y);

      -ms-transform: translate(@x,@y);

}

.translate80{

      .translate();

}

/*

综合上面4种变化,效果看下面的过度动画

@rotate

@scale

@skew

@translate

*/

.transform(@rotate :360deg,@scaleX :1,@scaleY :1,@skewX :0deg,@skewY :0deg,@translateX :100px,@translateY :0px){

   transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);

   -webkit-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);

   -moz-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);

   -o-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);

   -ms-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);

   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.my_transform{

      .transform();

}

/*

过度动画

id是css属性

2s过度时间 0s是开始时间

ease-in进入

*/

.tran(@t :id 2s ease-in 0s){

    transition:@t ;

    -moz-transition:@t ;

    -o-transition:@t ;

    -webkit-transition:@t ;

}

.my_tran{

   &:hover{

   .transform();

   .tran(all 2s ease-in 0s);

   }

}

/*

less文件中定义的函数

Animation 动画

@animation-name规定需要绑定到选择器的 keyframe 名称

@animation-duration规定完成动画所花费的时间，以秒或毫秒计,默认是 0。

@animation-timing-function规定动画的速度曲线。默认是 "ease"。

@animation-delay规定在动画开始之前的延迟。默认是 0。

@animation-iteration-count规定动画应该播放的次数。默认是 1。

@animation-direction规定是否应该轮流反向播放动画。默认是 "normal"。

*/

.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;

}

.my_animation{

   .animation(mykeyframes,5s,linear,2s,infinite,normal);

}

/***CSS定义的keyframes如下：****/

@keyframes mykeyframes

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-moz-keyframes mykeyframes /* Firefox */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-webkit-keyframes mykeyframes /* Safari 和 Chrome */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-o-keyframes mykeyframes /* Opera */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}