文字呼吸灯灯效果【纯CSS】

效果

文字切换.gif

html

使用button主要是因为button点击之后可以获取焦点，可以保持打开（文字颜色为白色）状态

<button class="light">light text</button>
<button class="light">light text</button>
<button class="light">light text</button>

CSS

主要是使用transition动画，使得切换的时候文字颜色包含动画效果

/*文字默认颜色和失去焦点时的颜色*/
.light {
    display: inline-block;
    outline: none;
    padding: 1rem 2rem;
    border: 1px solid #333333;
    background-color: #333333;
    color: #888888;
    transition: color 150ms linear; /*文字颜色变化时添加动画*/
}

/*鼠标滑过和点击时文字颜色变为白色*/
.light:hover,
.light:active,
.light:focus {
    color: #fff;
    transition: color 150ms linear; /*文字颜色变化时添加动画*/
}