12
2017
08

变形效果&过度效果

变形效果:transform:属性值为变形函数
    1、缩放函数scale(x,[y]),sacleX(x),sacle(Y),大于1方大小于1缩小;
    2、平移函数translate(x,y),translateX(x),translateY(y),相对于元素的原始位置进行平移;
    3、旋转函数rotate(deg)单位为deg
        ps.transform-origin: 0px 0px;表示以(0,0)点缩放;

实现元素变化时过度效果:
    transition-property: all; 指定需要加效果的元素
    transition-duration: 3s;  执行时间
    transition-timing-function:ease-in-out ; 过度方式
    transition-delay: 0s;  延迟
    简写transition: all(指定需要加效果的元素) 3s(执行时间) ease(过度方式) 0s(延迟);

针对特殊的样式,浏览器支持:
    IE: -ms-
    Firefox:-moz-
    Chrome & Safari & Opera & iOS Safari & Android Browser & Android Chrome: -webkit-


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

扫一扫,求打赏 扫一扫,求打赏