純css實現圍繞圓心運動的軌跡（圓形和方形）
阿新 • • 發佈：2018-12-07
主要使用keyframes屬性。
目前瀏覽器都不支援 @keyframes 規則。
Firefox 支援替代的 @-moz-keyframes 規則。
Opera 支援替代的 @-o-keyframes 規則。
Safari 和 Chrome 支援替代的 @-webkit-keyframes 規則。
定義和用法
通過 @keyframes 規則，您能夠建立動畫。
建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。
註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器繫結。
程式碼如下可以直接預覽：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> title </title>
<style type="text/css">
#circle {
width: 10px;
height: 10px;
background-color: #047acd;
border-radius: 50%;
position: absolute;
animation:animeX 4s ease-in-out -2s infinite alternate, animeY 4s ease-in-out infinite alternate;
}
@keyframes animeX{
0% {left: 0px;}
100% {left: 100px;}
}
@keyframes animeY{
0% {top: 0px;}
100% {top: 100px;}
}
</style>
<style>
#square
{
width:10px;
height:10px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div id="circle"></div>
<div id="square"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>