×

处理css3 transform过渡抖动兼容问题

作者:Terry2020.10.28来源:Web前端之家浏览:15035评论:0
关键词:html5css3

处理css3 transform过渡抖动兼容问题。

transform: scale();缩放在IE浏览器下会有抖动

transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转

如:

transform: scale(1.2);

换成:

transform: scale(1.2) rotate(0.1deg);

transform:translate();偏移会使图片或文字变得模糊

transform偏移还会使图片或文字失帧,变得模糊,可以使用clac解决

如:

transform:translate(-50%);

换成:

transform: translate(calc(-50% + 1px));

clac是css3的计算属性,可以使用在样式中的计算,clac语法:clac(数 + 数),注:这里“运算符号”两端的空格不能少

transform存在兼容性,IE浏览器只能兼容到IE 9,兼容写法:

transform:scale(1.2) rotate(0.1deg);
-ms-transform:scale(1.2) rotate(0.1deg);        /* IE 9 */
-moz-transform:scale(1.2) rotate(0.1deg);       /* Firefox */
-webkit-transform:scale(1.2) rotate(0.1deg);     /* Safari 和 Chrome */
-o-transform:scale(1.2) rotate(0.1deg);        /* Opera */

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/html2100231321231.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Terry

    可以加群讨论...

  • 访客

    详细一点...

  • 访客

    还可以...

  • 访客

    啊...

  • jimmy

    SEO更多跟代码有关。...

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2