html 点击高亮,css点击高亮模拟

如果你的css重置中禁止了点击高亮效果，你还可以使用css模拟这个css点击高亮，点击高亮效果主要在移动端用处比较大，移动端的按钮链接点击后如果没有表现出一些点击过的效果，会让人怀疑是不是点击到了。

css点击高亮-web前端开发http://www.51xuediannao.com/

.active{ position: relative; padding:10px;}

.active:before{

content: '';

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

background-color:#ddd;

background-repeat: no-repeat;

background-position: center;

background-size: 100% 100%;

opacity: 0;

pointer-events: none;

-webkit-transition: opacity 600ms;

transition: opacity 600ms; /*加上动画显得更自然*/

}

.active:active:before{

opacity: 1;

-webkit-transition: opacity 150ms;

transition: opacity 150ms;

}

点击试试

↓ 查看全文