〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用
/* 定义一个简单的列表项过渡效果 */
li {
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
/* 鼠标悬停时改变列表项的背景色和文字颜色 */
li:hover {
background-color: #f0f0f0;
color: #333;
}
这段代码展示了如何为列表项(li
)元素添加一个背景色和文字颜色的过渡效果。当鼠标悬停在列表项上时,背景色和文字颜色会在0.5秒内平滑改变,使用的是ease-in-out
缓动函数。这是CSS过渡效果的一个基本示例,对于学习前端开发的初学者来说,这是一个很好的入门级教程。
评论已关闭