How to create a circle animation effect in html5

This time I will show you how to create the animation effect of picturesturning in html5. What are the precautionsfor h5 to make the animation effect of pictures turning in circles. The following is a practical case. Let’s take a look.

<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the href attribute of a tag and the onclick event

The cursor size in the input input box How to solve the display inconsistency

#How to solve the problem that the background image of the a tag is not displayed under IE8

html The printing code supports page turning

#How to operate the input box style of type="file"

The above is the detailed content of How to create a circle animation effect in html5. For more information, please follow other related articles on the PHP Chinese website!