光点沿圆角按钮运动轨迹动画

最新推荐文章于 2023-04-04 22:48:22 发布

一天一天积累

最新推荐文章于 2023-04-04 22:48:22 发布

阅读量2.3k

点赞数 1

分类专栏： css样式文章标签：轨迹动画

css样式专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Demo

http://xuanfengge.com/demo/201506/spark/spark-button.html

效果

代码

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
         50 
       
         51 
       
         52 
       
         53 
       
         54 
       
         55 
       
         56 
       
         57 
       
        /*按钮*/ 
       
        . 
        join 
          
        { 
       
        position 
        : 
          
        absolute 
        ; 
       
        display 
        : 
          
        block 
        ; 
       
        text 
        - 
        align 
        : 
          
        center 
        ; 
       
        line 
        - 
        height 
        : 
          
        40px 
        ; 
       
        width 
        : 
          
        148px 
        ; 
       
        height 
        : 
          
        40px 
        ; 
       
        color 
        : 
          
        #fff5d1; 
       
        border 
        - 
        radius 
        : 
          
        20px 
        ; 
       
        border 
        : 
          
        1px 
          
        solid 
          
        #fff; 
       
        font 
        - 
        size 
        : 
          
        20px 
        ; 
       
        text 
        - 
        decoration 
        : 
          
        none 
        ; 
       
        top 
        : 
          
        247px 
        ; 
       
        left 
        : 
          
        0px 
        ; 
       
        } 
       
        /*光点*/ 
       
        . 
        spark 
          
        { 
       
        position 
        : 
          
        absolute 
        ; 
       
        width 
        : 
          
        30px 
        ; 
       
        height 
        : 
          
        41px 
        ; 
       
        background 
        : 
          
        url 
        ( 
        http 
        : 
        //appsearchcdn.baidu.com/statics/devplat/static/golden/img/spark_adce339.png) no-repeat; 
       
        top 
        : 
          
        227px 
        ; 
       
        left 
        : 
          
        6px 
        ; 
       
        - 
        webkit 
        - 
        animation 
        - 
        name 
        : 
          
        spark 
        ; 
       
        - 
        webkit 
        - 
        transform 
        - 
        origin 
        : 
          
        50 
        % 
          
        100 
        % 
        ; 
       
        - 
        webkit 
        - 
        animation 
        - 
        duration 
        : 
          
        8s 
        ; 
       
        - 
        webkit 
        - 
        animation 
        - 
        timing 
        - 
        function 
        : 
          
        linear 
        ; 
       
        - 
        webkit 
        - 
        animation 
        - 
        iteration 
        - 
        count 
        : 
          
        infinite 
        ; 
       
        - 
        webkit 
        - 
        animation 
        - 
        direction 
        : 
          
        normal 
        ; 
       
        } 
       
        /*动画*/ 
       
        @ 
        - 
        webkit 
        - 
        keyframes 
          
        'spark' 
          
        { 
       
        0 
        % 
          
        { 
       
        left 
        : 
          
        6px 
        ; 
       
        transform 
        : 
          
        rotate 
        ( 
        0deg 
        ) 
       
        } 
       
        35 
        % 
          
        { 
       
        left 
        : 
          
        112px 
        ; 
       
        transform 
        : 
          
        rotate 
        ( 
        0deg 
        ) 
       
        } 
       
        50 
        % 
          
        { 
       
        left 
        : 
          
        112px 
        ; 
       
        transform 
        : 
          
        rotate 
        ( 
        180deg 
        ) 
       
        } 
       
        85 
        % 
          
        { 
       
        left 
        : 
          
        6px 
        ; 
       
        transform 
        : 
          
        rotate 
        ( 
        180deg 
        ) 
       
        } 
       
        100 
        % 
          
        { 
       
        transform 
        : 
          
        rotate 
        ( 
        360deg 
        ) 
       
        } 
       
        }