css動畫屬性--小球移動
阿新 • • 發佈：2017-07-20
orm 100% clas dial rect 只有一個 back die func
主體只有一個div
<body> <div></div> </body>
樣式部分(測試:目前的瀏覽器還是需要加前綴才能兼容)
<style> * { margin: 0; padding: 0; } div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50px;border: 2px solid red; background: -webkit-radial-gradient(80px 80px, circle, #fff, #00f); background: -ms-radial-gradient(80px 80px, circle, #fff, #00f); /* 動畫名字 */ animation-name: move; /* 動畫時間 */ animation-duration: 3s; /* 動畫的類型 */ animation-timing-function: linear; /* 動畫播放次數 */ animation-iteration-count: infinite; /* 動畫是否允許反向 */ animation-direction: normal; /* 簡寫為 animation: move 2s linear 0s infinite normal;*/ } @-webkit-keyframes move { 0% { left: 0px; top: 0px; } 25%{ left: 150px; top: 150px; } 50% { left: 300px; top: 300px; } 75% { left: 450px; top: 450px; } 100% { left: 600px; top: 600px; } } @-ms-keyframes move { 0% { left: 0px; top: 0px; } 25% { left: 150px; top: 150px; } 50% { left: 300px; top: 300px; } 75% { left: 450px; top: 450px; } 100% { left: 600px; top: 600px; } } </style>
如有不足之處,請廣提意見,誠懇學習.
css動畫屬性--小球移動