首页 css3 正文

我要投稿

css3移动端-CSS3解决了联通端的卡顿问题（动画性能优化）。

bendan520 css3

2023-08-21 0 6,788 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

首先，使用CSS，jQuery，canvas制作动漫

1.帆布

优点：性能好，功能强大，支持大多数浏览器（不仅是IE6css3移动端，IE7，IE8），绘制的图形可以直接保存为.png或.jpg图形;

缺点：依赖HTML，只能通过脚本勾勒图形，没有API实现动漫（借助风暴和计时器更新）;由于画布上以编程方式显示的文本可能是位图，因此搜索爬网程序将完全忽略该文本。屏幕阅读器也很难阅读文本内容。

2.css3

优点：简单且与内容分开，CSS 动漫不会触发布局和绘画;（此属性更改不会触发布局和绘制：背面可见性、不透明度、透视、透视原点、变换）;

缺点：存在浏览器兼容性问题，Android手机会出现卡顿，受排版引擎限制，与整个页面的dom结构密切相关。

3.杰瑞

优点：没有兼容性问题

缺点：每一帧，重绘，复合（特别是时间并发）;

总结：就联通动画的功效而言，使用 CSS3 动画比 jQuery 动画效率高得多。在安卓手机上尤其如此！因此，联通动画以CSS3动画为优先级，jQuery只能用于简单处理应用逻辑。CSS3 Anime 是为内容布局添加特殊效果的通用解决方案，在联通浏览器上很可能受到排版性能的限制，性能不可预测，不会达到预期的效果。对于需要性能的特定场景，例如游戏，画布的使用将得到很大的改进。

二、CSS3在联通端存在滞后问题

CSS3 动漫在 iOS 上运行 66，有时在 Android 上运行。让我们从以下几点寻找问题。

一个。是否导致布局

如果是这样，如果可能的话，动漫元素是绝对的或固定的，以防止影响文档树以方便回流

二.是否启用硬件加速“

使用的CSS3动漫”和“硬件加速打开”是两回事，尽管后者可能会导致前者。

打开硬件加速在 WebKit 中有一个灵丹妙药：不透明度：1; 或 -webkit-backface-visibility：hidden;。

无论是高成本属性（cssshadows、渐变、背景附件：固定等）。

图片（如果有的话）也是一种选择。这可以看作是以空间换时间的优化。

d.重绘区域

如果是，我必须减少动漫的面积。此步骤的优化有限;

e. 尽量使用 TRANSFORM 生成动画，避免使用高度、宽度、边距、填充等;示例 1 和 2 如下所示。

PS：使用transform，浏览器只需要生成一次该元素的位图，然后在动画开始时将其交给GPU进行处理。将来，浏览器不需要进行任何布局、绘制和提交位图。因此，浏览器可以充分利用 GPU 在不同位置快速绘制位图，执行旋转或缩放过程。简而言之css3移动端，变换动画由 GPU 控制，支持硬件加速，并且不需要软件渲染

第三，动画过程有闪光灯（通常在动画的开头）。

溶液：

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

在带有 WebKit 内核的浏览器中运行良好的另一种方法是

：

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

本文以上就是这些内容，希望

对你的学习有所帮助，也希望大家对脚本屋的大力支持。

这次给大家介绍一下如何使用JS+CSS3实现响应键盘的图片放大缩小，以及使用JS+CSS3实现图片放大缩小的注意事项有哪些对键盘的响应。

今天看网易的网站，当我把键盘放起来时css3放大缩小，发现图片放大了，当我移开时，图片缩小了，于是我自己尝试了一下，结果如下。

方法一：使用js和css3

效果如图：

这种实现很简单，利用js的mouseover和mouseout扰动就可以了，但是不知道如何让图片从中间放大，等会儿试试吧，代码如下：



  网易图片动画
  
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
    }
    @keyframes bigger {
      from {width: 100%;height: 100%;}
      to {width: 110%; height: 110%;}
    }
    @keyframes smaller {
      from {width: 110%;height: 110%;}
      to {width: 100%; height: 100%;}
    }
  


  
    
  
  
    var img = document.querySelector("img");
    img.onmouseover = function () {
      img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
    }
    img.onmouseout = function () {
      img.style.cssText = "animation: smaller 2s";
    }

登录复制

方法二：使用css3方法

CSS3确实给我们带来了很多用途，让我们更容易解决问题。这里变换：scale(); 可以使用css3放大缩小，不过这个要和hover结合使用，并且要设置转场的时长才能有更好的效果。话不多说，效果如下：

疗效不是好很多吗？可以看出它是从中心开始扩展的。

但只要我们加上transform-origin属性，就可以很好的控制变化的中心点，比如：

transform-origin: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

登录复制

分别表示从左上角、右上角、左下角、右下角开始扩展。正如您可以想象的，默认的变换原点是 50% 50%。

源码如下：



  网易图片动画
  
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
      transition:transform 2s;
    }
    img.bigger:hover{
      transform: scale(1.2,1.2);
    }

登录复制

相信看完本文的案例，您已经掌握了方法。更多精彩，请关注php中文网其他相关文章！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!