CSS 实现小球的曲线运动
方法一:使用 animation 动画
将不同的两个方向的 animation 结合起来,就可以实现曲线运动的功能
向右的 animation + 向上的 animation = 向右向上的曲线运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.ball {
height: 60px;
width: 60px;
border-radius: 50%;
position: absolute;
/* 设置初始位置 */
bottom: 10px;
left: 10px;
background: red;
}
.top_right {
/* 同时设置两个动画 */
animation: to-right 3s 0.4s infinite linear,
to-top 3s 0.4s infinite cubic-bezier(0.15, 0.76, 0.25, 0.86);
animation-fill-mode: forwards;
}
/* 向上运动 */
@keyframes to-top {
0% {
bottom: 10px;
}
100% {
bottom: 300px;
background-color: yellow;
}
}
/* 向右运动 */
@keyframes to-right {
0% {
left: 10px;
transform: scale(0.7);
}
100% {
left: 300px;
/* 小球缩小为0.3倍 */
transform: scale(0.3);
/* 小球的背景变为黄色 */
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="ball top_right color"></div>
</body>
</html>
效果:
关于贝塞尔曲线 (cubic-bezier)
贝塞尔曲线就是速度曲线
用来描述小球运动过程中的速度,比如先快后慢、先慢后快…
使用样式:transition: all 2s cubic-bezier(0.48, -0.53, 0.47, 1.44);
设置了这一属性的变化将会按照这一贝塞尔速度曲线来运动
像这样的都是贝塞尔曲线:
ease-in-out
ease
cubic-bezier(0.48, -0.53, 0.47, 1.44)
...
可以调试出想要的贝塞尔曲线:调制贝塞尔曲线的网址
具体的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>关于贝塞尔曲线</title>
<style>
.animation {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(243, 224, 14);
transition: all 2s cubic-bezier(0.68, -0.56, 0.67, 1.65);
}
.animation:hover {
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
效果:
方法二:使用 left + top + 绝对定位
(建议使用动画)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>昼短苦夜长,何不秉烛游</title>
<style>
.ball {
width: 60px;
height: 60px;
border-radius: 50%;
/* 使用绝对定位 */
position: absolute;
top: 10px;
left: 10px;
background-color: red;
/* 下面将transition分开来写 */
transition-property: left, top, background-color;
transition-duration: 2s, 2s, 2s;
transition-timing-function: linear;
}
.ball:hover {
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
效果: