button面试题

作者: 啪啪啪---啪
来源: 51数据库
2021-07-08

?写一个程序，让三个按钮按不同速率向右移动，触碰到浏览器边缘时返回，持续这种效果

uni-app项目，template模板，原理相同

<template>
	<view>
		<!-- 写一个程序，让三个button按不同速率向右移动，触碰到浏览器边缘
		 时返回，持续这种效果-->
		<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>