Home > Article > Web Front-end > An example of how to use CSS to implement a circular motion ball

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

黄舟Original: 2017-10-27 10:08:364174browse

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;

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of the use of selectors in cssNext article：Summary of the use of selectors in css

See more

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

Related articles