效果
文字切換.gif
html
使用button主要是因?yàn)閎utton點(diǎn)擊之后可以獲取焦點(diǎn)，可以保持打開（文字顏色為白色）狀態(tài)
<button class="light">light text</button>
<button class="light">light text</button>
<button class="light">light text</button>
CSS
主要是使用transition動(dòng)畫，使得切換的時(shí)候文字顏色包含動(dòng)畫效果
/*文字默認(rèn)顏色和失去焦點(diǎn)時(shí)的顏色*/
.light {
display: inline-block;
outline: none;
padding: 1rem 2rem;
border: 1px solid #333333;
background-color: #333333;
color: #888888;
transition: color 150ms linear; /*文字顏色變化時(shí)添加動(dòng)畫*/
}
/*鼠標(biāo)滑過和點(diǎn)擊時(shí)文字顏色變?yōu)榘咨?/
.light:hover,
.light:active,
.light:focus {
color: #fff;
transition: color 150ms linear; /*文字顏色變化時(shí)添加動(dòng)畫*/
}
