光点沿圆角按钮运动轨迹动画
2019-04-14 12:55发布
生成海报
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:
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 newstime 的文章《光点沿圆角按钮运动轨迹动画》','https://www.xiaopingtou.net/article-55962.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}