精华内容
下载资源
问答
  • less封装函数动画

    2020-07-21 10:41:55
    给若干 li 添加动画, 问题1:怎么让每次写动画代码量减少 问题2:想给多个li添加层次动画,但li过多,每个li添加 nth-child() , 代码冗余, 怎么减少代码量 <!DOCTYPE html> <html lang="en"> <head&...

     

    给若干 li 添加动画,

    问题1:怎么让每次写动画代码量减少

    问题2:想给多个li添加层次动画,但li过多,每个li添加  nth-child() , 代码冗余, 怎么减少代码量

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./css/1.css">
    </head>
    
    <body>
      <ul>
        // 给20个li添加相同的动画,添加不同延时时间,形成层次效果
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </body>
    
    </html>

     

    解决问题1 : 为了解决代码冗余,对less进行动画封装

    // 初始动画,
    // 1 . 先隐藏(淡入)
    // 2 . 动画完成,保持为最后关键帧
    .fill-mode {
      opacity: 0;
      animation-fill-mode: forwards;
    }
    
    // 封装动画
    // 动画名 , 动画时长 , 动画延时(默认为0s)
    .ani(@name, @second, @await: 0s) {
      animation: @name @second @await;
      .fill-mode();
    }
    
    

    封装后,想调用动画可以  .ani(动画名,动画时长,动画延时(默认为0s))

     

     

    解决问题2 : 使用循环 , 给多个元素添加动画,

    // 循环动画
    .loop-ani(@n, @i: 1) when (@i <=@n) {
      &:nth-child(@{i}) {
        .ani(fadeInUp, 1s, 0s+@i/5);  
      }
    
      // 递归
      .loop-ani(@n, (@i + 1));
    }
    
    
    li {
      .loop-ani(20);
    }

     

     

     

    完整less代码

    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      width: 220px;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
    
      li {
        width: 20px;
        height: 20px;
        background: pink;
        margin: 10px;
      }
    }
    
    // 动画
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
      }
    
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
    
    // 初始动画,
    // 1 . 先隐藏(淡入)
    // 2 . 动画完成,保持为最后关键帧
    .fill-mode {
      opacity: 0;
      animation-fill-mode: forwards;
    }
    
    // 封装动画
    // 动画名 , 动画时长 , 动画延时(默认为0s)
    .ani(@name, @second, @await: 0s) {
      animation: @name @second @await;
      .fill-mode();
    }
    
    
    // 循环动画
    .loop-ani(@n, @i: 1) when (@i <=@n) {
      &:nth-child(@{i}) {
        .ani(fadeInUp, 1s, 0s+@i/5);  
      }
    
      // 递归
      .loop-ani(@n, (@i + 1));
    }
    
    
    li {
      .loop-ani(20);
    }

     

     

     

    展开全文
  • less封装累积

    2016-11-12 11:48:25
    //less文件中定义的函数 //Animation 动画  //@animation-name规定需要绑定到选择器的 keyframe 名称 //@animation-duration规定完成动画所花费的时间,以秒或毫秒计,默认是 0。 //@animation-timing-...
    @charset "utf-8";  
    //清楚浮动
    .clearfix{
            zoom:1;
            &:after{
                    content: "";
                    width: 0;
                    height: 0;
                    clear: both
            }
    }
    //居中
    .bc(){
            margin-left: auto;
            margin-right: auto;
    }
    //左浮动右浮动
    .fl(@fl:left){
            float: @fl;
    }
    .fr(@fr:right){
            float: @fr;
    }
    //14号字体
    .font14(){
            font-size: 14px;
    }
    .fix(){
            position: fixed;
    }
    .rel(){
            position: relative;
    }
    .abs(){
            position: absolute;     
    }
    //截断文本并显示省略号的混入类
    .ellipsis() {
        overflow:       hidden;
        white-space:    nowrap;
        text-overflow:  -o-ellipsis-lastline;
        text-overflow:  ellipsis;

    //透明度混入类
    .opacity(@value:0) {
            @ie6_value: (@value * 100);
            -khtml-opacity:@value;
            -moz-opacity: @value;
            opacity: @value;
            filter: ~'alpha(opacity=@{ie6_value})';
    }
    //强制缓行
    .word-wrap(){
        white-space: pre;
        white-space: pre-wrap;
        white-space: pre-line;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -hp-pre-wrap;
        word-wrap: break-word;
    }
    //用于设置单行文本垂直居中
    .line-height(){
        height: 24px;
        line-height: 24px;
    }
    //3D文字效果
    .three-d (@font-color){
        color: @font-color;
        text-shadow: 0 1px 0 #86b1bf,
                     0 2px 0 #7da8b6,
                     0 3px 0 #749fad,
                     0 4px 0 #6b96a4,
                     0 5px 0 #527d8b,
                     0 6px 1px rgba(0, 0, 0, 0.1),
                     0 0 5px rgba(0, 0, 0, 0.1),
                     1px 1px 3px rgba(0, 0, 0, 0.3),
                     3px 3px 5px rgba(0, 0, 0, 0.2),
                     5px 5px 10px rgba(0, 0, 0, 0.25),
                     0 10px 10px rgba(0, 0, 0, 0.2),
                     0 20px 20px rgba(0, 0, 0, 0.15);
    }
    //设置圆形
    .ball(@width) {
                    width: @width;
                    padding-top: @width;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                            border-radius: 50%;
    }
    //设置三角形
    .sanjiao(top,@w:5px,@c:#f00){  
        border-width: @w;  
        border-color: transparent transparent @c transparent;  
        border-style: dashed dashed solid dashed;  
    }  
    .sanjiao(bottom,@w:5px,@c:#f00){  
        border-width: @w;  
        border-color: @c transparent transparent transparent;  
        border-style: solid dashed dashed dashed;  
    }  
    .sanjiao(left,@w:5px,@c:#f00){  
        border-width: @w;  
        border-color:  transparent @c transparent transparent;  
        border-style:  dashed solid dashed dashed;  
    }  
    .sanjiao(right,@w:5px,@c:#f00){  
        border-width: @w;  
        border-color: transparent transparent transparent @c;  
        border-style:  dashed dashed dashed solid;  
    }  
    .sanjiao(@_,@w:5px,@c:#f00){  
        width: 0px;  
        height: 0px;  
        overflow: hidden;  
    }  
    //圆角
    .border-radius(@radius:5px){  
        -wekit-border-radius: @radius;  
        -max-border-radius: @radius;  
        border-radius: @radius;  
    }  
    //边框
    .border(@border-color:red;@border_width:1px;@bstyle:solid){  
        border: @border-color @border_width  @bstyle ;  
    }  
    //阴影
    .box-shadow(){
    -moz-box-shadow:2px 2px 5px #e3e3e3;/*firefox*/ 
    -webkit-box-shadow:2px 2px 5px #e3e3e3;/*webkit*/ 
    box-shadow:2px 2px 5px #e3e3e3;/*opera或ie9*/ 
    }
    //transition
    .transition(@a:all;@b:ease-out;@c:.2s){
      -webkit-transition:@a @c @b;
      -o-transition:@a @c @b;
      -ms-transition:@a @c @b;
      -moz-transition:@a @c @b;
      transition:@a @c @b;
    }


    //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---动画封装

    2019-11-03 12:23:00
    属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列 值: none 特殊关键字,表示无关键帧。 keyframename 标识动画的字符串 animation-nanme:move; animation-duration属性指定一个动画周期的...

    animation-name

    属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列

    值:
    none
    特殊关键字,表示无关键帧。
    keyframename
    标识动画的字符串

    animation-nanme:move;
    

    animation-duration属性指定一个动画周期的时长。
    默认值为0s,表示无动画。

    一个动画周期的时长,单位为秒(s)或者毫秒(ms),无单位值无效。
    注意:负值无效,浏览器会忽略该声明,但是一些早起的带前缀的声明会将负值当作0s

     animation-duration: 3s;
    

    animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。
    对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始,到关键帧结束。
    动画的默认效果:由慢变快再变慢
    linear:线性过渡,等同于贝塞尔曲线(0,0,1,1)
    ease:平滑过渡,等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
    ease-in:由慢到快,等同于贝塞尔曲线(0.42,0,1,1)
    ease-out:由快到慢,等同于贝塞尔曲线(0,0,0.58,1)
    ease-in-out:由慢到快再到慢,等同于贝塞尔曲线(0.42,0,0.58,1)
    cubic-bezier(1,1,2,3)

      /*           运动线性*/
                 animation-timing-function:linear;
    

    steps(n,[start|end])
    传入一到两个参数,第一个参数意思是把动画分成 n 等分,然后动画就会平均地运行。
    第二个参数 start 表示从动画的开头开始运行,相反,end 就表示从动画的结尾开始运行,
    默认值为 end。

    animation-delay:3s定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
    值:
    <time>
    从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位,定义无效

               /*  运动缓存时间*/
                 animation-delay: 3s;
    

      animation-iteration-count: infinite;

    定义了动画执行的次数(属于动画内的范畴)

    infinite
    无限循环播放动画.
    <number>
    动画播放的次数 不可为负值.

    animation-direction:

    定义了动画执行的方向

    normal
    每个循环内动画向前循环,换言之,每个动画循环结束,动画重置到起点重新开始, 这是默认属性。
    alternate
    动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向, 比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭 代
    reverse
    反向运行动画,每周期结束动画由尾到头运行。
    alternate-reverse
    反向交替, 反向开始交替

                  /* 运动方向*/
                   animation-direction:reverse;
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
              *{
                   margin: 0;
                   padding: 0;
              }
              #wrap{
                  position: relative;
                margin: 200px auto;
                  width: 300px;
                  height: 300px;
                  border: 1px solid;
              }
              #test{
                  position:absolute;
                  left:50%;
                  top: 50%;
              /*    transform: translate3d(-50%,-50%,0);*/
                margin-left: -50px;
                margin-top: -50px;
                  width: 100px;
                  height: 100px;
                  background: red;
                border-radius:50%;
              /*  定义动画名称*/
                animation-name:move;
                text-align: center;
                 line-height: 100px;
                 /*定义动画运动到结束时间*/
                 animation-duration: 8s;
      /*           运动线性*/
                 animation-timing-function:linear;
               /*  运动缓存时间*/
                 animation-delay: 3s;
                 
                 /*动画内的属性*/
                /* 运动次数*/
                 animation-iteration-count: infinite;
                  }
                  /* 运动方向*/
                   animation-direction:reverse;
                  @keyframes move{
                      from{transform:rotate(0deg);}
                      to{transform:rotate(360deg);}
                  }
                
            </style>
        </head>
        <body>
            <div id="wrap">
                <div id="test">0000</div>
            </div>
        </body>
    </html>
    
    View Code

    animation-fill-mode:forwards;

    * backwards:from之前的状态与form的状态保持一致
    * forwards:to之后的状态与to的状态保持一致
    * both:backwards+forwards

        animation-fill-mode: both;
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                
                *{
                    margin: 0;
                    padding: 0;
                }
                
                #wrap{
                    position: relative;
                    margin: 200px auto;
                    width: 300px;
                    height: 300px;
                    border: 1px solid;
                }
                #test{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    /*transform: translate3d(-50%,-50%,0);*/
                    margin-left:-50px;
                    margin-top: -50px;
                    width: 100px;
                    height: 100px;
                    background: pink;
                    text-align: center;
                    font: 20px/100px "微软雅黑";
                    
                    /*动画内的属性*/
                    animation-name: move;
                    animation-duration:3s ;
                    animation-timing-function: linear;
                        /*反转的是关键帧和animation-timing-function*/
                    animation-direction:normal;
                    /*动画外的属性*/
                    animation-delay:1s;
                    
                    /*只作用于动画内的属性*/
                        /*重复的是关键帧*/
                    animation-iteration-count: 3;
                    
                    
                    /*元素在动画外的状态
                     
                     * 
                     * backwards:from之前的状态与form的状态保持一致
                     * forwards:to之后的状态与to的状态保持一致
                     * both:backwards+forwards
                     * */
                        
                    animation-fill-mode: both;
                    animation-play-state: running;
                }
                
                @keyframes move{
                    from{
                        transform: translateY(-100px);
                    }
                    to{
                        transform: translateY(100px);
                    }
                }
                
                #wrap:hover #test{
                    animation-play-state: paused;
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                <div id="test">邱海峰</div>
            </div>
        </body>
    </html>
    
    View Code
    展开全文
  • LESS的基本使用 1.首先我们要把LESS环境搭建好。 2.然后创建LESS文件 3.现在我们可以开始写LESS文件了  例如:  我们一般写HTML文件的时候格式都是这样的                这样形成一个包含的...
                                                                                                 LESS的基本使用
    1.首先我们要把LESS环境搭建好。
    2.然后创建LESS文件
    3.现在我们可以开始写LESS文件了
       例如:
       我们一般写HTML文件的时候格式都是这样的
        <body>
        <div id="wrap">
        <div class="head"></div>
        <div class="main"></div>
        <div class="foot"></div>
        </div>
        </body>
      这样形成一个包含的关系,易于查找和区别。
      那CSS文件是怎么写的呢
      #wrap{}
      #wrap head{}
      #wrap main{}
      #wrap foot{}
      那我们LESS文件是怎么写的呢
      #wrap{
      .head{}
      .main{}
      .foot{}
      }
      这样咋一看 也很清楚,没什么问题,2者之间区别也不大,但是假如里面包含更多呢。例如我们要在头部写个导航呢.
      <div class="head">
      <ul>
      <li>
      <span>
    <a></a>
    <b></b>  
      </span>
      <li>
      </ul>
      </div>
      如果是这样的结构呢,那标签A和B的属性该怎么写呢。。。
      css的写法是这样的
      #wrap .head ul li span a{}
      #wrap .head ul li span b{}
      而我们的LESS又是怎么写的呢
      #wrap{
      .head{
      ul{
      li{
      span{
      a{}
      b{}
      }
      }
      }
      }
      }
     大家是不是觉得这样写有点眼熟  是不是和HTML结构一样呢。这样就方便大家一目了然的理清结构,而且也不需要总是重复。
     
     好了,大家现在对LESS的结构写法有一定的认识的吧 那我们下面进一步讲解,为什么他能提高我们的编写效率的
     1.可自定义变量
      既然是变量,那我们怎么定义呢。比如:
      我们定义一个变量 a ,肯定有的人会说VAR A;    那在LESS怎么定义呢。那我们看个例子:
      正常情况下我们要是给字体定义一个颜色都是这样写的
      #wrap{
      color:#fff;
      }
      但是我们定义变量后就是这样实现的
      @a:#fff;
      #wrap{
      color:@a;
     
      大家觉得这没什么的,都不是一个样吗。
      好如果是多个地方都是用这个颜色呢
      #wrap{
      .head{
      color:Red;
      }
      .main{
      color:Red;
      }
      .foot{
      color:Red;
      }
      }
      我们需要这3个部位第一开始是红色的,突然需求说该风格 要求把这些颜色都改成蓝色,那我们是不是就要把这3个地方都要该一遍呢。
      而我们的LESS只需要该下这个变量就可以了;
      @a:red;
      #wrap{
      .head{
      color:@a;
      }
      .main{
      color:@a;
      }
      .foot{
      color:@a;
      }
      }
      我们该成蓝色风格的时候,只需要这样,就全部变成蓝色了。
      @a:blue;
      #wrap{
      .head{
      color:@a;
      }
      .main{
      color:@a;
      }
      .foot{
      color:@a;
      }
      }
    2.自定义函数
    好,有的人又说了,我想写个border 他不是有3个属性吗。
    @border:1px solid red;
    这样我们就定义了一个变量,但是有的人问了,可不可以修改其中1个或者2个呢。这就要蒋LESS的另外一个自定义函数了
    .border(@a,@b,@c){
    border:@a @b @c;
    }
    #wrap{
    .border(1px,solid,red);
    }
    这样我们就可以随便修改了,大家就说了,这样写也没看出有什么不方便啊。那我们在举个更能让大家易懂的列子把。
    随着CSS3的发展,各大浏览器都有自己的内核,写法都会有所差别,这就要求我们兼容的时候 都要考虑到,这就让我们一个属性要重复的写上3-4遍,修改的时候也是这样。这样就体现出LESS的优势了。
    现在举个列子比如:
    现在圆角属性大家都知道把,既方便,又好用。但是问题也来了。
    #wrap{
    border-radius:5px;
    -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    }
    这样我们就定义了一个圆角出来了。
    但是我想把圆角该成10px呢?这样我们就要该4个位置。。是不是觉得很麻烦。而LESS可以这样
    .border-radius(@radius){
    border-radius:@radius;
    -moz-border-radius: 5px;
      -webkit-border-radius: @radius;
    -o-border-radius: @radius;
    }
    #wrap{
    .border-radius{10px};
    }
    这样不是变得简单了呢。是不是对LESS很期待。
    在这里我分享下在网上找到的大部分定义的函数,都是平常大家经常用到的属性。
    1.透明度
    .opacity(@opacity) {
      opacity: @opacity;
      // IE8 filter
      @opacity-ie: (@opacity * 100);
      filter: ~"alpha(opacity=@{opacity-ie})";
    }

    #wrap{
    .opacity(0.5) ;
    }

    兼容IE8和现代浏览器

      2.清楚浮动
      .clearfix() {
      zoom: 1;//为了兼容IE6,7。假如不需要可以不写。
      &:before,
      &:after {
        content: " "; // 1
        display: table; // 2
      }
      &:after {
        clear: both;
      }
    }

    #wrap{
    .clearfix() ;
    }

    3.(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
    .tab-focus() {
     // Default
     outline: thin dotted;
     // WebKit
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px;
    }
      #wrap{
    .tab-focus();
    }

    4. 定义块状结构的宽高
    .size(@width; @height) {
     width: @width;
     height: @height;
    }
    .square(@size) {
     .size(@size; @size);
    }
    #wrap{
    .size(100px; 200px) 

    #wrap{
    .square(100px;)
    }
     
      5.文本溢出包含元素时时候隐藏
    .text-overflow() {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
    }

      #wrap{
    .text-overflow() 
    }

    6.绘制上下,左右4个半圆。和圆
    6.1上
    .border-top-radius(@radius) {
     border-top-right-radius: @radius;
      border-top-left-radius: @radius;
    }
    6.2右
    .border-right-radius(@radius) {
     border-bottom-right-radius: @radius;
        border-top-right-radius: @radius;
    }
    6.3下
    .border-bottom-radius(@radius) {
     border-bottom-right-radius: @radius;
      border-bottom-left-radius: @radius;
    }
    6.4作
    .border-left-radius(@radius) {
     border-bottom-left-radius: @radius;
        border-top-left-radius: @radius;
    }
    6.5 圆
    .border-radius(@radius){
    border-radius:@radius;
    -moz-border-radius: 5px;
      -webkit-border-radius: @radius;
    -o-border-radius: @radius;
    }

    7.实现输入字体无效,只会显示背景
    .hide-text() {
     font: ~"0/0" a;
     color: transparent;
     text-shadow: none;
     background-color: transparent;
     border: 0;
    }
    // New mixin to use as of v3.0.1
    .text-hide() {
     .hide-text();
    }

    #wrap{
    .hide-text() 
    }

    8.盒子阴影
    .box-shadow(@shadow) {
     -webkit-box-shadow: @shadow; 
             box-shadow: @shadow;
    }

    #wrap{
    .box-shadow(5px 5px 5px gray); 
    }

    9.动画效果
    .transition(@transition) {
     -webkit-transition: @transition;
             transition: @transition;
    }
    .transition-property(@transition-property) {
     -webkit-transition-property: @transition-property;
             transition-property: @transition-property;
    }
    .transition-delay(@transition-delay) {
     -webkit-transition-delay: @transition-delay;
             transition-delay: @transition-delay;
    }
    .transition-duration(@transition-duration) {
     -webkit-transition-duration: @transition-duration;
             transition-duration: @transition-duration;
    }
    .transition-transform(@transition) {
     -webkit-transition: -webkit-transform @transition;
        -moz-transition: -moz-transform @transition;
          -o-transition: -o-transform @transition;
             transition: transform @transition;
    }

    .rotate(@degrees) {
     -webkit-transform: rotate(@degrees);
         -ms-transform: rotate(@degrees); // IE9 only
             transform: rotate(@degrees);
    }
    .scale(@ratio; @ratio-y...) {
     -webkit-transform: scale(@ratio, @ratio-y);
         -ms-transform: scale(@ratio, @ratio-y); // IE9 only
             transform: scale(@ratio, @ratio-y);
    }
    .translate(@x; @y) {
     -webkit-transform: translate(@x, @y);
         -ms-transform: translate(@x, @y); // IE9 only
             transform: translate(@x, @y);
    }
    .skew(@x; @y) {
     -webkit-transform: skew(@x, @y);
         -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
             transform: skew(@x, @y);
    }
    .translate3d(@x; @y; @z) {
     -webkit-transform: translate3d(@x, @y, @z);
             transform: translate3d(@x, @y, @z);
    }

    .rotateX(@degrees) {
     -webkit-transform: rotateX(@degrees);
         -ms-transform: rotateX(@degrees); // IE9 only
             transform: rotateX(@degrees);
    }
    .rotateY(@degrees) {
     -webkit-transform: rotateY(@degrees);
         -ms-transform: rotateY(@degrees); // IE9 only
             transform: rotateY(@degrees);
    }
    .perspective(@perspective) {
     -webkit-perspective: @perspective;
        -moz-perspective: @perspective;
             perspective: @perspective;
    }
    .perspective-origin(@perspective) {
     -webkit-perspective-origin: @perspective;
        -moz-perspective-origin: @perspective;
             perspective-origin: @perspective;
    }
    .transform-origin(@origin) {
     -webkit-transform-origin: @origin;
        -moz-transform-origin: @origin;
         -ms-transform-origin: @origin; // IE9 only
             transform-origin: @origin;
    }

    10.animate动画
    .animation(@animation) {
     -webkit-animation: @animation;
             animation: @animation;
    }
    .animation-name(@name) {
     -webkit-animation-name: @name;
             animation-name: @name;
    }
    .animation-duration(@duration) {
     -webkit-animation-duration: @duration;
             animation-duration: @duration;
    }
    .animation-timing-function(@timing-function) {
     -webkit-animation-timing-function: @timing-function;
             animation-timing-function: @timing-function;
    }
    .animation-delay(@delay) {
     -webkit-animation-delay: @delay;
             animation-delay: @delay;
    }
    .animation-iteration-count(@iteration-count) {
     -webkit-animation-iteration-count: @iteration-count;
             animation-iteration-count: @iteration-count;
    }
    .animation-direction(@direction) {
     -webkit-animation-direction: @direction;
             animation-direction: @direction;
    }

    11.盒子大小
    .box-sizing(@boxmodel) {
     -webkit-box-sizing: @boxmodel;
        -moz-box-sizing: @boxmodel;
             box-sizing: @boxmodel;
    }
    附带属性:
    content-box    这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
             border-box   为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
             inherit            规定应从父元素继承 box-sizing 属性的值。

    12.用户不能选择元素中的任何内容
    .user-select(@select) {
     -webkit-user-select: @select;
        -moz-user-select: @select;
         -ms-user-select: @select; // IE10+
             user-select: @select;
    }
    附带属性:
    auto——默认值,用户可以选中元素中的内容
    none——用户不能选择元素中的任何内容
    text——用户可以选择元素中的文本
    element——文本可选,但仅限元素的边界内(只有IE和FF支持)

    13.拖动调整尺寸大小
    .resizable(@direction) {
     resize: @direction; // Options: horizontal, vertical, both
     overflow: auto; // Safari fix
    }
    附带属性:
    none-不能拖放
    both-任意拖放
    horizontal-水平拖放
    vertical-垂直拖放

    14.分栏效果
    .content-columns(@column-count; @column-gap: @grid-gutter-width) {
     -webkit-column-count: @column-count;
        -moz-column-count: @column-count;
             column-count: @column-count;
     -webkit-column-gap: @column-gap;
        -moz-column-gap: @column-gap;
             column-gap: @column-gap;
    }
    附带属性:
       -webkit-column-count:num;/*分栏数量。*/
    -webkit-column-width:length;/*每一栏的宽度,不设置的时候按默认宽度*/
    -webkit-column-gap:length;/*相邻两栏之间的间距,包括中间rule的宽度*/
    -webkit-column-rule:1px red solid;/*这里的设置和border一样,表示栏与栏之间的分割线的样式*/
    根据这四个属性,我们就可以做出大部分的分栏效果。

    15.滤镜被禁止
    .reset-filter() {
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
    }
    当你需要删除一个梯度背景,不要忘记使用这个重置/ /下面的IE过滤IE9。

    16.响应式图片
    .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
     background-image: url("@{file-1x}");
     @media
     only screen and (-webkit-min-device-pixel-ratio: 2),
     only screen and (   min--moz-device-pixel-ratio: 2),
     only screen and (     -o-min-device-pixel-ratio: 2/1),
     only screen and (        min-device-pixel-ratio: 2),
     only screen and (                min-resolution: 192dpi),
     only screen and (                min-resolution: 2dppx) {
       background-image: url("@{file-2x}");
       background-size: @width-1x @height-1x;
     }
    }

    #wrap{
    .img-retina('../title_bg.jpg';'../title_bg.jpg'; 15px; 16px);
    }

    17.保持图像缩放不超过父容器大小
    .img-responsive(@display: block) {
     display: @display;
     max-width: 100%; // Part 1: Set a maximum relative to the parent
     height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
    }
           
               希望对大家有所帮助





    展开全文
  • css transition 实现数字切换动画效果,并封装成React组件。
  • 封装axios并使用拦截器加载loading动画 首先封装loading动画,现制作一个简易的loading动画(后期会优化) <template> <div v-if="loadingShow" class="loading"> loading </div> </...
  • Less 创建css3动画@keyframes函数

    千次阅读 2018-12-25 19:23:00
    封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @content(); } } .keyframes (@prefix,@name,@content) when (@prefix=moz) { @-moz-...
  • 所以为了自己能实现一个类似materialUI的按钮点击动画,并封装到自己的UI库中,笔者特地总结了一些思路,希望可以和广大的前端工程师们一起探讨. 正文 首先我们看一下materialUI的按钮点击效果: 本质上也是用了css3动画...
  • 逐帧动画和补间动画
  • 1.bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT ...
  • React 动画框架简介

    2017-09-27 20:51:46
    由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现...React 插件React 官方提供了两个插件用于处理动画效果:一个是偏底层的 react-addons-transition-group,一个是在前者基础上进一步封装的 react-addons-
  • 2.transition动画,以及CSS3的动画【因为用到了CSS3所以会有兼容性的问题】如果考虑兼容就需要另想动画效果的方案。 3.props传参 4.style标签当中的scope的用法以及详细解释【深度选择器方面的知识】 .5方案的三种...
  • jQuery的封装原理

    2021-07-14 23:01:14
    jQuery的封装原理 ...它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 特性和优势: 支持各种主流浏览器 语法简单 拥有丰富的插件 jQue
  • less常用整理

    千次阅读 2018-04-20 14:27:19
    编译: 1、在node全局使用npm包... less xxx.less xxx.css 把less编译成css  less xxx.less xxx.min.css -x 不仅编译成css,而且把css压缩  注意:编译时引入进来的样式后缀也要是less @import "reset...
  • Bootstrap的核心是用less来编写的,bootstrap对less进行了二次封装,提供了很多基础的less变量和函数,个人觉得非常有用,下面就来具体看下bootstrap为我们提供了哪些常用的变量和函数吧。   Bootstrap变量 ...
  • 之前写的长页面滚屏动画回过头看发现有很多局限性 比如: 1.每次动画后都要加上opacity:1,元素...1:使用less封装 动画函数 // 封装动画 简化每次动画操作 .fill-mode { opacity: 0; animation-fill-mode: forwa...
  • Bootstrap--less

    2020-04-24 21:23:26
    Less 是一个 CSS 预处理器,不能在浏览器编译,需要借助less.js进行编译 一、变量 定义变量—分为全局变量和局部变量 @width:100px; @height:100px; @backGround:green; @borderColor:blue; 变量的运用 .box{ ...
  • 一、less基础 1.1、less开篇 1.什么是CSS预处理器? CSS预处理器就是用某一种语言用来为CSS增加一些动态语言的特性(变量、函数、继承等。js就是动态语言。) CSS预处理器可以让你的CSS更加简洁,适应性更强,...
  • 容器内内容足够多时才会显示滚动条,发生滚动且...一、封装组件代码 <template> <div class="z-scoll-view-wrapper" :style="{ height: height + 'px' }"> <div class="z-scoll-view-content" :style.
  • H5说话气泡点击动画

    2019-09-22 20:22:09
    目录 需求 思路 实现 半透明气泡制作 html结构 lessrem规则自己换算也可以使用px 对话框css动画 添加计时器完成点击动画和计时动画 封装功能函数 函数调用 需求 还是要先把需求拿出来。...
  • less预编译css基础语法

    2018-03-29 19:13:29
    作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题,可以随时退回使用标准的 CSS。 为什么要学习less,sass等预编译语言? 因为...
  • 组件的封装用到了CSS动画、定位、,以及Element UI提供的下拉菜单组件el-dropdown。代码如下, <template> <div class="all" @click="clickFire"> <span class="item-border"> <el-image
  • jQuery的封装原理 ...jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、...
  • Bootstrap—由less来架构Bootstrap

    万次阅读 2012-12-11 15:39:02
    众所周知,less是一种动态样式语言, bootstrap基于less来编写是为了让bootstrap能够继承less的优势,如变量,继承,运算,函数。如果大家想了解或者回顾下less可以看下以前苏河介绍的less 让css动起来—-lesscss...
  • Android属性动画之实践篇

    千次阅读 2018-05-31 00:27:36
    一,写在前面 Android动画分为View动画,帧动画,属性动画。 View动画包含四种动画:ScaleAnimation,TranslateAnimation,AlphaAnimation,RotateAnimation,分别对应缩放,平移,透明度,旋转。View动画有个特点...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,281
精华内容 2,912
关键字:

less动画封装