An example of how to use CSS to implement a circular motion ball-CSS Tutorial-php.cn

An example of how to use CSS to implement a circular motion ball

黄舟

Release： 2017-10-27 10:08:36

Original

4179 people have browsed it

We often see some animation effects on the page. Many of these animation effects can be achieved only through CSS.

Here we use the animation attribute of CSS3.

The animation property is a shorthand property for setting six animation properties:
animation-name specifies the name of the keyframe that needs to be bound to the selector.
animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function specifies the speed curve of animation.
animation-delay Specifies the delay before the animation starts.
animation-iteration-count specifies the number of times the animation should play.
animation-direction Specifies whether the animation should be played in reverse in turn.
Note: Please always specify the animation-duration attribute, otherwise the duration is 0 and the animation will not be played.

animation: name duration timing-function delay iteration-count direction;

Copy after login

For example: a small ball moving in a circular motion. Below is the relevant code, you can make corresponding modifications based on this.

<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=&#39;text/css&#39;>
body{background:black;}
.class_ball
{
    width:8px;
    height:8px;
    background:#FFFFFF;
    border-radius:4px;
    box-shadow:0 0 7px #FFFFFF;
    left:200px;
    top:200px;
    position:absolute;
    -webkit-animation:action 2s linear infinite;
}
@-webkit-keyframes action
{
from{transform: rotate(0deg)  translate(58px) rotate(0deg);}
to{transform: rotate(360deg) translate(58px) rotate(-360deg);}
}
</style>
</head>
<body>
   <p class="class_ball"></p>
</body>
</html>

Copy after login

The above is the detailed content of An example of how to use CSS to implement a circular motion ball. For more information, please follow other related articles on the PHP Chinese website!