首頁 >web前端 >css教學 >如何使用CSS實現圓週運動小球的實例

如何使用CSS實現圓週運動小球的實例

黄舟原創: 2017-10-27 10:08:364235瀏覽

我們時常在頁面中見到一些動畫效果，這些動畫效果，很多可以只透過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=&#39;text/css&#39;>
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實現圓週運動小球的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中關於選擇器的使用總結下一篇：css中關於選擇器的使用總結

看更多