主体只有一个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>
如有不足之处,请广提意见,诚恳学习.
时间： 2024-10-30 12:02:01