如果你足够细心,你就会发现,很多组件库中,动态的交互效果都是有过渡的。比如一个按钮,默认为浅绿色,hover
时为深绿色,从浅绿到深绿如果能够有一个颜色逐渐过渡的效果,那就太棒了。CSS实现这个功能非常简单,和我们用Flash制作补间动画一样容易。
当然,JavaScript能够实现该功能,但是用CSS更加直接。
我们这里实现一个按钮hover
颜色过渡的例子。
<button class="my-btn">按钮</button>
.my-btn {
background-color: #ff6e66;
transition: background-color 0.5s;
/* 为了让按钮美观点,设置的一些不重要的样式,大家不要在意这些细节 */
color: white;
font-family: "Microsoft YaHei UI", sans-serif;
font-size: 1.2rem;
padding: 0.62rem;
border: none;
border-radius: 5px;
outline: none;
box-shadow: 0 0 5px 1px #ff6e66;
}
.my-btn:hover {
background-color: #ff9185;
}
实际上,重点就是transition
属性,第一个参数指定过渡效果起作用的属性,第二个参数指定过渡效果发生的时间。