快速上手CSS预处理语言Less--模板(常用的CSS3效果函数及常用颜色搭配)

心已赠人 2022-04-04 13:16 282阅读 0赞

大佬的文档：[Less定义常用的CSS3效果函数及常用颜色搭配][Less_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);
    }
     
    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的文章：

*  [值得参考的 10 个 LESS CSS 实例][10 _ LESS CSS]
 *  [CSS3新特性+less实验——animation][CSS3_less_animation]
 *  [关于less的css3前缀的写法][less_css3]
 *  [用Less CSS定义常用的CSS3效果函数][Less CSS_CSS3]

[Less_CSS3]: https://www.cnblogs.com/RuMengkai/p/6502057.html
[10 _ LESS CSS]: https://www.oschina.net/translate/10-less-css-examples-you-should-steal-for-your-projects?print
[CSS3_less_animation]: https://blog.csdn.net/hjb2722404/article/details/46358711
[less_css3]: https://blog.csdn.net/natalie86/article/details/43524285
[Less CSS_CSS3]: https://blog.csdn.net/u013415353/article/details/51465382