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

来源：懂视网责编：小采时间：2020-11-27 18:49:58

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

如何使用CSS实现圆周运动小球的实例:我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过CSS来实现。在这里我们用到了CSS3的animation属性。animation 属性是一个简写属性，用于设置六个动画属性：animation-name 规定需要绑定到选择器的 keyframe 名称。animati

推荐度：

点击下载本文 文档为doc格式

导读如何使用CSS实现圆周运动小球的实例:我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过CSS来实现。在这里我们用到了CSS3的animation属性。animation 属性是一个简写属性，用于设置六个动画属性：animation-name 规定需要绑定到选择器的 keyframe 名称。animati

我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过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实现圆周运动小球的实例

推荐度：

点击下载本文 文档为doc格式

标签：实现案例示例

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐