LESS css3 画线流动

最新推荐文章于 2024-08-31 12:28:59 发布

转载最新推荐文章于 2024-08-31 12:28:59 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/eturn/p/4555841.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用LESS CSS实现动画效果，包括关键帧定义、动画播放控制及元素定位调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet/less" type="text/css" href="less.less" />

 

<div id="container">

<div id="line1" class="line"></div>

<div id="line2" class="line"></div>

<div id="line3" class="line"></div>

<div id="line4" class="line"></div>
</div>

 

<script src="less.js" type="text/javascript"></script>

LESS:

@r:5px;

#container{
    border: 1px solid;
    width: 800px;
    height:600px;
    position: relative;
}

@MyTemplate:{      
   @{stay0}{
   .wh(@left,@top,@direction,@length);
    }

    @{stay1},100%{
    background-size:100% 100%;
    }
};

#makeKeyFrames(@name,@template){
         @-webkit-keyframes @name {
      @pre: -webkit-;
      @template();
    }

    @-moz-keyframes @name {
      @pre: -moz-;
      @template();
    }

    @-o-keyframes @name {
      @pre: -o-;
      @template();
    }

    @keyframes @name {
      @pre: ~'';
      @template();
    }
}

.wh(@left,@top,@d,@length) when(@d='right'){
    left:@left;
    top:@top;
    width:@length;
    height:@r;
    background-position:left;
    background-size:0 @r;
}

.wh(@left,@top,@d,@length) when(@d='down'){
    left:@left;
    top:@top;
    width:@r;
    height:@length;
    background-position:top;
    background-size:@r 0;
}
.wh(@left,@top,@d,@length) when(@d='left'){
    left:@left - @length;
    top:@top;
    width:@length;
    height:@r;
    background-position:right;
    background-size:0 @r;
}
.wh(@left,@top,@d,@length) when(@d='up'){
    left:@left;
    top:@top - @length;
    width:@r;
    height:@length;
    background-position:bottom;
    background-size:@r 0;
}

.line(@name,@left,@top,@starttime,@worktime,@looptime,@direction,@length) {
    border:0;
    background-color:#BBB;
         position: absolute;
         .wh(@left,@top,@direction,@length);

    background-image: url(less.png);
    background-repeat:no-repeat;
    background-origin:content-box;

         -webkit-animation: @name @looptime infinite;
         -moz-animation: @name @looptime infinite;
         -o-animation: @name @looptime infinite;
         animation: @name @looptime infinite;

         @stay0:percentage(@starttime/@looptime);
         @stay1:percentage((@starttime + @worktime)/@looptime);

         #makeKeyFrames(@name,@MyTemplate);
}


@loop:4s;
#line1 {
    .line(a,10,10, 0s,1s,@loop,'right',100px);
}

#line2 {
    .line(b, 110px,10, 1s, 1s, @loop, 'down',100px);
}

#line3 {
    .line(c,110px,110px,2s,1s,@loop,'left',60px);
}

#line4 {
    .line(d,50px,110px ,3s,1s,@loop,'up',60px);
}