写一个程序,让三个按钮按不同速率向右移动,触碰到浏览器边缘时返回,持续这种效果
uni-app项目,template模板,原理相同
<template>
<view>
<button class="btn red"></button>
<button class="btn yellow"></button>
<button class="btn blue"></button>
</view>
</template>
<style>
.btn {
width: 100rpx;
height: 40rpx;
margin: 10rpx;
}
@keyframes late{
0%{transform:translateX(0);}
50%{transform:translateX(calc(100vw - 120rpx));}
100%{transform:translateX(0);}
}
.red {
background-color: red;
animation: late 3s infinite;
}
.yellow {
background-color: yellow;
animation: late 4s infinite;
}
.blue {
background-color: blue;
animation: late 5s infinite;
}
</style>
<script>
</script>
本文地址:https://blog.csdn.net/weixin_45820444/article/details/110186140