html 自动连线,连线.html

*{padding: 0;margin: 0;}

@keyframes move {

0% {

width:5px;

transform: rotate(45deg);

}

50% {

width:100px;

transform: rotate(45deg);

}

100% {

width:250px;

transform: rotate(45deg);

}

}

@keyframes move2 {

0% {

width:5px;

transform: rotate(70deg);

}

50% {

width:100px;

transform: rotate(70deg);

}

100% {

width:250px;

transform: rotate(70deg);

}

}

@keyframes move3 {

0% {

width:5px;

transform: rotate(200deg);

}

50% {

width:100px;

transform: rotate(200deg);

}

100% {

width:250px;

transform: rotate(200deg);

}

}

.box {

position: relative;

width: 300px;

height: 20px;

margin: 0 auto;

}

.point {

width: 5px;

height: 5px;

background-color: #f00;

position: absolute;

transform-origin: left top;

animation: move 1s forwards linear;

}

.point2{

width: 5px;

height: 5px;

background-color: #f00;

position: absolute;

left:180px;

top:165px;

transform-origin: left top;

animation: move2 1s forwards linear;

display: none;

}

.point3{

width: 5px;

height: 5px;

background-color: #f00;

position: absolute;

left:267px;

top:390px;

transform-origin: left top;

animation: move3 1s forwards linear;

display: none;

}

var animationDiv = $("#point1");

var animationDiv2 = $('#point2');

var animationDiv3 = $('#point3');

animationDiv.bind("webkitAnimationEnd", function() {

console.log("动画结束");

animationDiv2.show();

animationDiv2.addClass("point2");

});

animationDiv2.bind("webkitAnimationEnd", function() {

console.log("动画结束");

animationDiv3.show();

animationDiv3.addClass("point3");

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史