用Less CSS定义常用的CSS3效果函数
定义圆角及调用
/* 定义圆角 @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); } }
定义Animation动画及调用
/* 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;} }
参考引用
http://my.oschina.net/u/98589/blog/57510
http://lesscss.org/
http://www.w3school.com.cn/
http://www.css3maker.com/
Less在线编译工具：
http://tool.oschina.net/less
