web实现点按效果

5大大大大雄

2022-07-03 461 阅读1分钟

由于移动端web和pc端web中存在很多需要被点击元素，一点击之后就会有一系列动作发生。为了能够让使用者，一眼看出自己操作了什么，因此需要实现一套点击效果。

解决

使用定时器+动画【需要使用js，比较麻烦，且延迟性比较明显】
使用伪类:active+动画【方便调用】

主要讲解`:active`

定义：CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。它通常只出现一瞬间，并提供元素确实被点击的视觉反馈
使用元素：:active 伪类一般被用在 <a> 和 <button> 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的<label>标签被激活的表格元素。:active也可以应用于任何元素
- a标签使用这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover 和 :visited。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
案例：

<body>
    <div class="enlarge">
    </div>
</body>
<style>
    div{
        background: red;
        height: 100px;
        width: 100px;
    }
    .enlarge:active{
        animation: enlarge 0.2s linear;
    }                  
    @keyframes enlarge {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(2);
        }
    }                
</style>

经过测试，手机端web 和pc端web 点击div后，都会出现放大效果。

兼容性：

常见伪元素兼容性：