〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果
/* 定义一个简单的div元素，并为它添加一个鼠标悬停的状态 */
div {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 1s ease-in-out; /* 添加背景颜色变化的过渡效果 */
}
/* 当鼠标悬停在div上时，改变背景颜色 */
div:hover {
background-color: red;
}这段代码定义了一个div元素，并为它添加了一个过渡效果。当鼠标悬停在这个div上时，背景颜色会在1秒钟内从蓝色平滑地过渡到红色，使用了ease-in-out作为缓动函数，它使得过渡的速度在开始和结束时变慢，从而提供了更加真实的视觉效果。
评论已关闭