首頁 > 開發者 > CSS

css3動畫中圓形運動軌跡的實現

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
css3中通過@keyframes定義動畫，animation設定動畫屬性，從而實現動畫效果；

在animation屬性當中，可以規定動畫的名稱、整個動畫的已耗用時間、運動的速度曲線以及其延遲時間、播放次數等。

animation

animation作為一個複合屬性，包括了以下動畫屬性。

  • animation-name -------------------------------------規定動畫名稱

  • animation-duration ---------------------------------規定動畫完成一次的時間

  • animation-timing-function ----------------------規定動畫的運動速度曲線

  • animation-delay ------------------------------------規定動畫的延遲時間

  • animation-iteration-count -----------------------規定動畫的播放次數

  • animation-direction ------------------------------規定動畫下一周期是否逆向開始

  • animation-fill-mode -------------------------------規定動畫時間之外的狀態

  • animation-play-state ------------------------------規定動畫的運行和暫停

animation-timing-function

規定動畫的速度曲線。預設是 "ease"。常用的運動速度曲線還有以下幾種：

  • linear：線性過渡。

  • ease-in：由慢到快。

  • ease-out：由快到慢。

  • ease-in-out：由慢到快再到慢。

也可以直接使用貝茲路徑規定啟動並執行速度曲線，貝茲路徑的4個數值需在[0, 1]區間內。

animation-direction

規定動畫是否在下一周期逆向播放。預設是 "normal"。

  • reverse:反方向運動

  • alternate:先正常方向再反方向運動，持續交替

  • alternate-reverse:先反方向再正常方向運動，持續交替

animation-fill-mode

規定對象動畫時間之外的狀態。常用值如下：

  • none:預設值

  • forwards:設定對象狀態為動畫結束時的狀態

  • backwards:設定對象狀態為動畫開始時的狀態

圓形運動軌跡

實現代碼如下：

<!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title>沿圓形軌跡運動</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        html,body{            height: 100%;        }        #trajectory {            width: 300px;            height: 300px;            border: 4px solid #949494;            border-radius: 50%;            position: relative;            left: calc(50% - 153px);            top:calc(50% - 153px);        }        @keyframes moveX{            0% {left: -22px;}            100% {left: 282px;}        }        @keyframes moveY{            0% {top: -22px;}            100% {top: 282px;}        }        #move {            width: 40px;            height: 40px;            font-size: 12px;            background-color: #32c33a;            border-radius: 50%;            position: absolute;            left:-22px;            top:-22px;            animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;        }    </style></head><body>    <p id="trajectory">        <p id="move">Immortal brother</p>    </p></body></html>

以上代碼的注意點如下：

  • 對body高度100%的設定原因在於html5環境下body的預設高度為0

  • calc在使用過程中，值與值之間的“-”和“+”兩端的空格必不可少

  • 動畫當中的left和top值為物體運動的起始位置和結束位置，要注意border值

  • 動畫一次執行的運動軌跡僅為一半

  • 速度曲線：cubic-bezier(0.36,0,0.64,1)；

  • 兩個方向的延遲時間的設定 X：-2s;Y : 0s

  • 先正方向再反方向持續交替運行 ：alternate

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition css3 text animation effects css3 missing manual css3 background image html5 css3 templates dreamweaver css3 animated buttons
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More