<div id="ccc"></div>
new mojs.Shape({
parent: '#ccc',
shape: 'circle',
stroke: '#FC46AD',
strokeDasharray: '125, 125',
strokeDashoffset: {'0': '-125'},
strokeWidth: 4,
fill: 'none',
left: '10%',
top: '50%',
angle: {'-90': '270'},
radius: 20,
isShowStart: true,
duration: 2000,
easing: 'back.in',
})
.then({
angle: {'-90': '270'},
strokeDashoffset: {'-125': '-250'},
duration: 3000,
easing: 'cubic.out',
onComplete () {
this.replay(0); // 无限循环
}
}).play()
new mojs.Shape({
shape: 'rect',
fill: 'none',
stroke: '#FC46AD',
radius: 10,
strokeWidth: 20,
angle: { [-180] : 0 },//如果是负数可以像[-180]包起来
duration: 2000
}).then({
strokeWidth: 0,
scale: { to: 2, easing: 'sin.in' },
onComplete () {
this.replay(0); // 无限循环
}
}).play();
new mojs.Shape({
shape: 'rect',
fill: 'none',
stroke: 'cyan',
radius: 10,
strokeWidth: 20,
angle: { [-180] : 0 },
top: '50%',
left:'75%',
x:-200,//就是自身向左移动200px;
duration: 2000,
delay: 200
}).then({
// duration here will be 600 too because inherited from the previous block
// delay here will have default 0 value
angle: -360,
scale: 2,
strokeWidth: 0,
stroke: { 'magenta' : 'yellow' },
onComplete () {
this.replay(0); // 无限循环
}
}).play();
This Pen doesn't use any external CSS resources.