时间戳

首页 > 解决方案 > 如何仅使用 css 在移动设备上实现按钮单击效果

html - 如何仅使用 css 在移动设备上实现按钮单击效果

问题描述

使用下面的代码，当点击示例元素时，示例会变大然后变小，这很好。但问题是，当我点击示例元素两次时，效果只会显示一次。
我知道那是因为示例元素仍然聚焦，所以动画没有被触发。
我想用css解决这个问题，我该怎么办？

.sample:hover, .sample:focus {
  animation: phoneButtonEffect 0.2s linear;
}
@keyframes phoneButtonEffect {
  50% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1)
  }
}

标签： htmlcss

解决方案

这可以通过 :active 伪类来实现。

看看这个：

.sample{
	height: 10em;
	width: 10em;
	background-color: red;
	transition: all .2s ease-in-out;
}

.sample:active {
	transform: scale(1.1);
	transition: .1s;
}
	<div class="sample">

	</div>

第一个.2s值是转换恢复正常所需的时间，第二个值.1s在 :active 选择器中，是 .sample 元素达到所需状态的时间，在这种情况下，缩放(1.1)。

推荐阅读