CSS 3 过渡
=====================================================================================
过渡---一个元素在不同状态之间进行平滑的转换,CSS 3 中使用transition属性实现过渡效果。
transition :过渡属性 执行时间 时间函数 延时时间;
时间函数---设置元素运动的速度
(1)贝塞尔曲线 cubic-bezier(p1(x,y),p2(x,y))
预定义贝塞尔曲线:
ease(默认值)
linear
ease-in
ease-out
ease-in-out
(2) steps()
step-start //步数为一
step-end
=======================================================================================================================================================================================
示例一:
img:hover{ transform: translate(600px); } img{ transition:2s cubic-bezier(0.6,0.1,0.1,0.7); }
示例二:
<style> div:hover img{ transform:translate(300px); } .i01{ transition:2s steps(3,start); } .i02{ transition:2s steps(3,end); } .i03{ transition:2s linear; } </style>
<div> <img src="p_w_picpaths/caffe-1.jpg" alt="" class="i01"/><br/> <img src="p_w_picpaths/caffe-2.jpg" alt="" class="i02"/><br/> <img src="p_w_picpaths/caffe-3.jpg" alt="" class="i03"/> </div>
===========transition属性的每一步都可以用单独的属性表示
transition: all 2s linear 3s;
transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay: 3s;
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
本文标题:CSS3过渡-transition-创新互联
文章出自:https://www.cdcxhl.com/article26/deoejg.html
成都网站建设公司_创新互联,为您提供电子商务、全网营销推广、建站公司、软件开发、搜索引擎优化、App开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联