Article From:https://segmentfault.com/q/1010000011706835
Question:

Seek an H5 load animation, the effect is a circular div, a small ball on the circular line circle, can click div pause and continue.
Don’t write JQ. It’s simple. I need to use it in react.
Probably the effect is so, drawing slightly ugly, ha ha.

Answer 0:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border: 1px solid orange;
             border-radius: 50%; 
            position: relative;
             transform-origin: center center; 
            animation: rotate  1s infinite linear;
            transition: all 1s;
        }

        .ball {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: -5px;
            top: 45px;
        }
        @keyframes rotate  {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="circle">
        <span class="ball"></span>
    </div>
</body>
</html>

Answer 1:

I wrote a planetary Galaxy in its original form, and you just change it. The elliptic equation is about the same as the circular equation.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Planets run < /title>< /head>< style type= "text/css" >Body{background: #666;}Div{pOsition: absolute; border-radius: 50%;}#box{width:15px; height:15px; background:#0099FF;}#boX1{width:25px; height:25px; background: darkorange;}#box2{width:30px; height:30px; background:#4169E1;}#box3{width:35px; height:35px; background: indianred;}#box4{width:40px; height:40px; backGround:lightgoldenrodyellow}#box5{width:45px; height:45px; background:yellowgreen}#box6{widtH:50px; height:50px; background:darkblue}#box7{width:60px; height:60px; background:darkslateblue}#box8{width:70px; height:70px; background: #000;}#taiyang{width:80px; height:80px; left:580px;Top:280px; background:orange; box-shadow: 00 5px orangered;}< /style>< script type= "text/jAvascript ">Window.onload = function () {Var oBox = document.getElementById ('box');Var oBox1 = document.getElementById ('box1');Var oBox2 = document.getElementById ('box2)");Var oBox3 = document.getElementById ('box3');Var oBox4 = document.getElementById('box4');Var oBox5 = document.getElementById ('box5');Var oBox6 = document.getElemeNtById ('box6');Var oBox7 = document.getElementById ('box7');Var oBox8 = document.geTElementById ('box8');Move (oBox, 5100,50610315);Move (oBox1,10150,80600315);Move (oBox2,15180100600315);Move (oBox3,20220120600315);Move (oBox4,25,280160600315);Move (oBox5,30320200600315);Move (oBox6,35380240600315);Move (oBox7,40430280600315);Move (oBox8,50500320600315);Function move (Obj, time, a, B, x, y) / / / object, movement time, long axis, short axis, X direction offset value, Y direction offset valueObj.num = 0;Var x = x||0;Var y = y||0;Obj.timer = setInterval (function () {Obj.num++Obj.style.left = a*Math.cos (obj.num*Math.PI/180) +x +'px';Obj.style.top = b*Math.sin (obj.num*Math.PI/180) +y +'px';If (obj.num < 360) {Var cDiv = document.createElement ('div');CDiv.style.cssText ='width:1px; height:1px; background:#fff; position:absolute';CDiv.style.left = obj.offsetLEFT + obj.offsetHeight/2 +'px';CDiv.style.top = obj.offsetTop + obj.offsetWidtH/2+'px';Document.body.appendChild (cDiv);}}, time)}}< /script>< body>< div id= "box" > < /div>< div id= "box1" > < /div>< div id= "box2" > < /div>< div id= "box3" > < /div>< div id= "Box4" ≫ < /div>< div id= "box5" > < /div>< div id= "box6" > < /div>< div id= "box7"> < /div>< div id= "box8" > < /div>< div id= "Taiyang" > < /div>< /body&gT;

</html>

Answer 2:

You can always rotate with CSS3 animation, then click JS to stop and rotate.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *