更多
黑客联盟 黑客软件
学生黑客联盟
您现在的位置:学生黑客联盟 > 编程频道 > WEB前端 > 浏览信息
用Less CSS定义常用的CSS3效果函数
时间:2015-03-20 22:05 来源:www.stuhack.com 作者:学盟网
定义圆角及调用/*定义圆角@radius 圆角大小*/.round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}.round7{ .round(7px);}定义盒子阴影及调用/*盒子阴影@right_left 右边阴影为正数 左边负数@bottom_
定义圆角及调用   /* 定义圆角 @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); }   image   定义轮廓内部框及调用   /* 画轮廓 就是内部框 @outline 样式 @outline1 间距 负数在内部 */ .outline(@outline:1px solid #699,@outline1:-10px){     outline:@outline;     outline-offset:@outline1; } .my_outline{     .outline(); }   image   定义旋转,菱形旋转,缩放,移动及调用   /* 旋转角度 @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;} }


本文标题:用Less CSS定义常用的CSS3效果函数

本文地址:http://www.stuhack.com/bc/qianduan/032014222.html

免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。




百度钱包“落子

一个商户通过审核入驻百度钱包,将获得百度[查看详细]

移动搜索&发

移动搜索在移动端的创新和颠覆也为百度探索[查看详细]

张向宁:移动互联

张向宁回顾了他2002年提出的“互联网十大预[查看详细]

淘宝开卖二维码门

截至4月20日,淘宝已经售出车展的实体门票[查看详细]

百度钱包杀入移动

“百度钱包”将完成的 “搜索用户”与“消[查看详细]