当前位置:Gxlcms > css > 如何使用CSS实现圆周运动小球的实例

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

时间:2021-07-01 10:21:17 帮助过:134人阅读

我们时常在页面中见到一些动画效果,这些动画效果,很多可以仅通过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实现圆周运动小球的实例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行