CSS为我们提供了多种样式过渡的方式,以下介绍其中两种:1. 逐渐改变样式transition: property duration timing-function delay; /* propert
CSS为我们提供了多种样式过渡的方式,以下介绍其中两种:
1. 逐渐改变样式
transition: property duration timing-function delay; /* property:指定CSS属性 duration:过渡时间,单位为秒或毫秒 timing-function:过渡效果,可选项有ease、linear、ease-in、ease-out、ease-in-out等 delay:延时时间,单位为秒或毫秒,可选 */ /* 示例 */ div { background-color: red; transition: background-color 1s ease-in-out 0.5s; } div:hover { background-color: green; }
以上示例中,当鼠标悬停在div元素上时,它的背景色将逐渐从红色过渡到绿色,过渡时间为1秒,过渡效果为先加速后减速,延时时间为0.5秒。
2. 使用关键帧动画
@keyframes anim { from { /* 初始状态的CSS样式 */ transform: scale(1); } to { /* 结束状态的CSS样式 */ transform: scale(1.5); } } /* 示例 */ div { animation: anim 1s ease-in-out 0.5s infinite alternate; } /* 注:infinite表示无限循环,alternate表示来回反复播放 */
以上示例中,div元素将会按照关键帧动画中定义的样式进行缩放,过渡时间为1秒,过渡效果为先加速后减速,延时时间为0.5秒,且不断反复播放。
粉丝
0
关注
0
收藏
0