Css3 轨迹运动

发表于 | 分类于

本文内容以Css3技术为基础，请使用支持Css3技术的浏览器浏览。

实现效果主要用到的是Css3的transform属性。

以下为Css3核心代码：

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
.spark {position: absolute;width: 30px;height: 41px;background: url(spark.png) no-repeat;top: 227px;left: -15px;
	-webkit-animation-name: spark;
	-webkit-transform-origin: left center;
	-webkit-animation-duration: 3s;
 	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-direction: normal;
}
.spark2 {left: 6px;
	-webkit-animation-name: spark2;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation-duration: 8s;
}
.spark3 {left: 6px;
	-webkit-animation-name: spark3;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation-duration: 4s;
}

@-webkit-keyframes 'spark' {
	0% {left: -15px;}
	35% {left: 3px;transform: translateX(25px)}
	50% {left:25px;transform: translateY(40px)}
	85% {left: -15px;transform: translateY(40px)}
}
@-webkit-keyframes 'spark2' {
	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)}
}
@-webkit-keyframes 'spark3' {
	0% {left: 6px;transform: rotate(0deg)}
	100% {transform: rotate(360deg)}
}

参考站点
实验室传送门