住房和城乡建设统计网站,进出口贸易,上海怎样做网站,中国网站备案查询系统CSS3过渡 允许css的属性值在一定的时间内平滑地过渡在鼠标单击、获取焦点、被点击或对元素任何改变中触发#xff0c;并圆滑地以动画效果改变CSS的属性值transition transition-property属性检索或设置对象中的参与过渡的属性 语法 transition-property:none|all|property … CSS3过渡 允许css的属性值在一定的时间内平滑地过渡在鼠标单击、获取焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变CSS的属性值 transition transition-property属性检索或设置对象中的参与过渡的属性 语法 transition-property:none|all|property 参数说明 none 没有属性改变all 默认值property 元素属性名 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssbody{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}div:hover{cursor: pointer;background: red;transition-property:background }/style /headbodydiv/div/body
/html 鼠标经过方块变红离开后恢复正常 transition-duration属性检索设置对象过渡的持续时间 语法 transition-duration:time; 参数说明 规定完成过渡效果需要花费的时间以秒或毫秒计默认值是0 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssbody{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }/style /headbodydiv/div/body
/html transition-timing-function 检索或设置对象中过渡的动画类型 linear 线性过渡ease 平滑过渡ease-in 由慢到快ease-out 由快到慢ease-in-out 由慢到快在到慢step-start step-end transition-delay属性检索或设置对象延迟过渡的时间 语法 transition-delay:time 参数说明 指定秒或毫秒之前要等待切换效果开始默认值 0 转载于:https://www.cnblogs.com/zry2510/p/7084811.html
