轩枫阁

首页 / Web前端 / CSS / 光点沿圆角按钮运动轨迹动画

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

阅读：19628 评论：5 作者：ivan 分类：CSS、Web前端

Demo

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

效果

spark

代码

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)
    }
}

 

125/470
127/470

相关阅读

文章评论

  • 林林

    请问这个效果需要注意什么 比如运动到圆角的时候角度 距离怎么算

    2019 年 7 月 19 日 下午 2:44
  • 林林

    请问这个效果需要注意什么 角度 距离怎么算

    2019 年 7 月 19 日 下午 2:42
  • 缥缈郎君

    来看看

    2017 年 9 月 25 日 下午 5:30
  • 痴海

    能发这么好的文章，太谢谢了

    2015 年 12 月 15 日 上午 9:19
  • xipeng_me

    学习了

    2015 年 7 月 22 日 下午 4:37

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间