Tag:Little ball

  • CSS3 + JavaScript to achieve cool breathing effect


    Using CSS3 animation to achieve a simple cool effect, the final effect is as follows: Page structure( index.html ): <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <h1>Relax And Breath</h1> <div class=”container”> <div class=”circle”></div> <p id=”text”></p> <div class=”pointer-container”> <div class=”pointer”></div> </div> <div class=”gradient-circle”></div> </div> <script></script> </body> […]

  • JavaScript animation example: dynamic ball


    The coordinate equation of the known circle is:           X=R*SIN(θ)           Y=R*COS(θ)     (0≤θ≤2π) Divide the 0 ~ 2 π interval into 48 equal segments, that is, set the value of interval dig as π / 24. The initial value of θ starts from 0, the coordinate values […]

  • Step by step create canvas ball animation


    The methods we need to use canvas are as follows: context.arc(x, y, r, sAngle, eAngle, counterclockwise); Step 1: draw a small ball var canvas = document.getElementById(‘canvas’), ctx = canvas.getContext(‘2d’), w = canvas.width , // width of canvas h = canvas.height , // height of canvas Posx = 20, // define the center X coordinate Posy […]

  • Web high imitation Fandeng H5 / wechat music playing suspended ball effect


    In the past two days, we have completed a suspended ball effect imitating Fandeng H5, which is very similar to the effect of wechat music playing suspended ball. Today, let’s summarize the implementation process (based on Vue Implementation). Let’s take a look at the effect of fan Deng H5. Let’s see my realization. It’s perfect. […]