如何使用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实现圆周运动小球的实例的详细内容,更多请关注其它相关文章!