废话不多，上代码
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ????<style> ?????*{ ???????margin: 0; ????????padding: 0; ???????list-style: none; ???} ???.btn.active, .active:active{ ???????transition-duration: 0s; ???????background-color: #d9d9d9; ???} ???.btn{ ???????transition-duration: 3s; ???} ???li{ ???????height: 30px; ???????line-height: 30px; ???????text-align: center; ???} ???</style></head><body> ???<ul> ???????<li class="btn">123131123131</li> ???????<li class="btn">li</li> ???????<li class="btn">li</li> ???????<li class="btn">li</li> ???</ul> ?????<script> ?????var uu = ?document.getElementsByTagName(‘ul‘)[0]; ?????uu.addEventListener(‘mousedown‘,function(e){ ???????var target = e.target; ???????target.classList.add(‘active‘); ?????????????}) ?????uu.addEventListener(‘mouseup‘,function(e){ ???????var target = e.target; ???????target.classList.remove(‘active‘); ?????????????}) ??</script></body></html>关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法
原文地址：https://www.cnblogs.com/hill-foryou/p/9083811.html