定義圓角及調用
/* 定義圓角 @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/