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

(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。内容未经允许不得转载，或转载时需注明来源： 创新互联