本文详细介绍了如何使用HTML和CSS创建一个动态的小球动画效果。通过定义关键帧动画，小球能够从页面左侧开始，逐渐改变位置、颜色及大小，最终达到页面右侧。此过程涉及了CSS动画的基本属性，如运动时间、延迟时间、重复次数和运动方向。
小球动画效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation动画</title>
<!-- <script type="text/javascript" src='./bundle.js'></script> -->
<style>
.qq{
position:absolute;
left:0;
width:20px;
height:20px;
background:red;
border-radius: 50%;
animation: jump 5s ease-in-out 10s infinite alternate;
/* 第一个属性是动画名称， */
/* 第二个运动时间 */
/* 第三个animation-timing-function 动画运动曲线：linear匀速、 ease慢-快-慢（默认） */
/* 第四个animation-delay 延迟时间： */
/* 第五个动画重复次数。1次，2次，infinite无限次 */
/* 第六个动画是否往返运动。normal默认从头到尾，alternate头尾往返，reverse从尾到头 */
}
@keyframes jump {
0% {background:red;left:0px}
50% {background:rgba(200,100,60,0.6);left:100px;transform: scale(2);}
100% {background:rgba(114, 155, 233, 0.6);left:200px}
}
</style>
</head>
<body>
<div class='qq'>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
