资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS3过渡-transition-创新互联

CSS 3 过渡

创新互联专业为企业提供沭阳网站建设、沭阳做网站、沭阳网站设计、沭阳网站制作等企业网站建设、网页设计与制作、沭阳企业网站模板建站服务,十载沭阳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

=====================================================================================

过渡---一个元素在不同状态之间进行平滑的转换,CSS 3 中使用transition属性实现过渡效果。

transition :过渡属性  执行时间  时间函数 延时时间;

时间函数---设置元素运动的速度

(1)贝塞尔曲线  cubic-bezier(p1(x,y),p2(x,y))

预定义贝塞尔曲线:

ease(默认值)

linear

ease-in

ease-out

ease-in-out

CSS 3 过渡-transition

CSS 3 过渡-transition

CSS 3 过渡-transition

(2) steps()

step-start  //步数为一

step-end

=======================================================================================================================================================================================

示例一:

img:hover{
    transform: translate(600px);
}
img{
    transition:2s cubic-bezier(0.6,0.1,0.1,0.7);
}

示例二:

    
        
        
             

===========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-创新互联
文章转载:http://cdkjz.cn/article/deoejg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220