Rumah >hujung hadapan web >tutorial css >如何使用CSS实现圆周运动小球的实例
如何使用CSS实现圆周运动小球的实例
- 黄舟asal
- 2017-10-27 10:08:364237semak imbas
我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过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>Atas ialah kandungan terperinci 如何使用CSS实现圆周运动小球的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中关于选择器的使用总结Artikel seterusnya：CSS中display实现淡入淡出过渡效果的实例