CSS3 过渡
程序员文章站
2022-03-26 12:21:42
过渡:执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的CSS属性。 2.指定效果的持续时间。 div{ transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover{ width:300px ......
过渡:执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的css属性。 2.指定效果的持续时间。
div{ transition: width 2s; -webkit-transition: width 2s; /* safari */ } div:hover{ width:300px; }
也可以同时改变多个属性
div{ transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; }
transition的四个属性如下:
div{ transition: 属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间 -webkit-transition:属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间 } 属性名:width height background-color; 过渡时间:2s; 过渡效果的时间曲线: linear ease ease-in ease-out ease-in-out; 开始的延迟时间:2s;
上一篇: javascript中五句话
下一篇: 输入网址到显示网页浏览器都干了什么