如何使用CSS实现圆周运动小球的实例

我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过CSS来实现。

在这里我们用到了CSS3的animation属性。

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

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

例如：一个做圆周运动的小球。下边是相关代码，大家可以在此基础相做相应的修改。

<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'>
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>

以上就是如何使用CSS实现圆周运动小球的实例的详细内容，更多请关注其它相关文章！

相关文章：

你感兴趣的文章：

标签云：