写一个程序，让三个按钮按不同速率向右移动，触碰到浏览器边缘时返回，效果图如下：
在这里插入图片描述是不是有同学看完题目一阵思索，准备用js监听dom 位置，判断后做反向运动？ 这里用css 动画来做的话简直不费吹灰之力。 我先定义三个按钮，要求大小相同颜色不同。 然后用@keyframes 声明一个动画，再通过animation 来调用。代码及注释如下，如有疑问请在评论区留言。
代码语言：javascript复制<template>
<view>
<!-- 写一个程序，让三个button按不同速率向右移动，触碰到浏览器边缘
时返回，持续这种效果-->
<button class="btn red"></button>
<button class="btn yellow"></button>
<button class="btn blue"></button>
<!-- 定义公共类是为了复用css样式，
定义私有类是为了调整animation的参数，
以此来实现不同速率的运动 -->
</view>
</template>
<style>
.btn {
width: 100rpx;
height: 40rpx;
margin: 10rpx;
}
@keyframes late{
/*@keyframes是声明动画的关键字，late是动画名
0% 意味开始运动的第一帧，
100%意味运动的最后一帧。
50%的作用是触碰屏幕右侧，实现回弹。
*/
0%{transform:translateX(0);}
/*这里用到了一个CSS 函数， calc，意味计算，此内置方法可直接使用
120rpx 包含了 button自身的宽度100rpx，以及屏幕左右两侧的留白（约20rpx）
计算后的结果是button可以移动的最远距离，即屏幕右侧。
*/
50%{transform:translateX(calc(100% - 120rpx));}
100%{transform:translateX(0);}
}
.red {
background-color: red;
/*调用自定义动画，参数依次为：动画名，持续时长，循环次数*/
animation: late 3s infinite;
}
.yellow {
background-color: yellow;
/*因持续时长不同，有3s走完全程，有4s走完全程，故而速率不同*/
animation: late 4s infinite;
}
.blue {
background-color: blue;
/*还可以调整移动速率及动画延迟，顺序如下：
动画名，持续时长，匀速运动，仅发动两次，延迟1s后发动*/
animation: late 5s linear 2 1s;
}
</style>如有疑问请在下方评论区留言，博主每天都在，原创不易，请支持下推荐阅读。
