Home > Developer > Web Develop
First, a simple way to achieve an animated effect
<!DOCTYPE><HTML><Head><title>Promise Animation</title><styletype= "Text/css">. Ball{width:40px;Height:40px;Border-radius:20px; }. Ball1{background:Red; }. Ball2{background:Yellow; }. Ball3{background:Green; }</style></Head><Body> <Divclass= "Ball Ball1"style= "margin-left:0"></Div> <Divclass= "Ball Ball2"style= "margin-left:0"></Div> <Divclass= "Ball Ball3"style= "margin-left:0"></Div> <Scripttype= "Text/javascript"> //define three balls varball1=Document.queryselector ('. Ball1') varball2=Document.queryselector ('. Ball2') varBall3=Document.queryselector ('. Ball3') //Ball, moving distance, callback function functionanimate (ball, distance, CD) {//change the position of the sphere once every 13 milliseconds until it reaches the specified positionSetTimeout (function(){ varmarginleft=parseint (Ball.style.marginLeft,Ten) //The ball reaches its expected position if(MarginLeft===distance) {CD&&CD ()}Else{ //Ball on the left if(MarginLeft<distance) {MarginLeft++ }Else{ //the ball is on the rightmarginleft-- } //adjust the position of the ballBall.style.marginLeft=MarginLeft animate (ball, distance, CD)}, -) } //Control AnimationsAnimate (Ball1, -,function() {animate (Ball2, $, function() {animate (Ball3, Max, function() {animate (Ball2, Max, function() {animate (Ball1, Max, function(){ }) }) }) }) }) </Script></Body></HTML>
10 MU class Network "Attack on node. JS Foundation (i)" First knowledge promise
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
