利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。

最新推荐文章于 2022-03-07 12:31:23 发布
最新推荐文章于 2022-03-07 12:31:23 发布
阅读量832 收藏
点赞数
分类专栏： 前端 文章标签： css3 javascript html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44341110/article/details/116330032
版权

利用CSS的动画完成轮播图功能，切换图片时发现，在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊。

如下图：

轮播图切图时下面的内容：“办公家具”、“更多”明显视觉效果会发生抖动现象。尝试QQ浏览器、火狐浏览器、谷歌浏览器调试发现仅QQ浏览器有此问题。

解决办法：我的轮播图是通过transform: translateX()在X轴移动实现效果，给轮播图容器加一个transform: translateZ(0);或者transform: translateY(0);属性即可解决问题。

如下图：

落丶寞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 transform过渡抖动问题解决
01-18
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
如何解决css动画抖动的问题
qq_41146402的博客
06-08 2664
在使用css做动画的时候，我们经常会遇到动画抖动的问题，你是怎么解决的？
在使用轮播图插件时出现抖动问题
weixin_38168728的博客
09-22 692
今天做一个vue项目，在使用一个轮播图插件时出现了轮播图下面的div抖动问题 什么原因出现的，我也不太确定。百度后有人说是轮播的图片高度不一致导致的，然后各种css样式都来了什么隐藏溢出啊试了一下没一点卵用 后来看见一篇博客说在img标签的上一层div上样式加这个： transform: translateZ(0); ok成功解决。 =========...
解决CSS transition或transform导致相关元素或容器闪烁抖动的问题
DR1sxy的博客
08-18 9239
如果发现这些动画导致某些元素或者容器闪烁，抖动时，可以在使用动画属性的元素上（或发生抖动的元素上）添加如下声明： .listname{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } 但是有的时候一些完全不相关的元素也跟着抖动闪烁，可以在body元素上做如下声明： body { -webkit-transform: translate3d(0, 0, 0) ; transform: translate3d(0, 0, 0
Css3无缝滚动防抖
易函123
09-12 1336
问题 图片加文字的无缝滚动，在手机端的效果总体还行，但是图片在手机某些浏览器会抖得腻害！ 错误写法 不能用left，margin-left,像这种写法: .donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { from { left: 0;
支持平滑抖动切换jQuery轮播图代码.zip
07-04
【标题】"支持平滑抖动切换jQuery轮播图代码.zip"所包含的知识点主要集中在JavaScript（JS）和jQuery库的使用上，特别是涉及到图片轮播图的动态效果实现。这款代码利用了jQuery的事件处理、动画效果以及DOM操作等...
jQuery图片抖动滑块切换.zip
11-22
在网页设计中，图片滑块是一种常见的元素，用于展示多张图片或内容，而“jQuery图片抖动滑块切换”则是一种独特的交互方式，它通过添加动态效果，使图片在切换时产生微妙的抖动，从而提升用户的浏览体验。...
支持平滑抖动切换jQuery轮播图特效代码
03-20
总结来说，这个特效代码包提供了一个带有平滑和抖动切换效果的jQuery轮播图解决方案，通过mySystem.js插件实现了独特的动画效果。对于想要在网站上添加互动性强、视觉吸引力高的轮播图功能的开发者来说，这是一个有...
全屏带动画和触摸效果的jquery图片轮播插件
10-29
总结来说，全屏带动画和触摸效果的jQuery图片轮播插件涉及的知识点包括：jQuery库的使用、CSS样式布局、响应式设计、CSS3动画、JavaScript事件处理以及触摸事件的实现。通过熟练掌握这些技术，开发者可以构建出既...
css3帧动画无缝衔接会闪一下,CSS3 动画闪烁问题
weixin_42517987的博客
08-04 1357
今天在写一个简单的动画发现的问题界面上面有一个按钮，点击按钮会弹出模态框，模态框的出现是一个动画 opacity 从 0 到 1；我在按钮上面添加了一个 active 伪类 opacity 为 0.5；当点击按钮的时候模态框根据动画弹出，但是按钮和模态框之间存在一直闪烁的问题，电脑上面看不出效果，手机上面闪烁效果明显，我这里是 一加 5T 手机，身边还有个 华为 P30 pro 试了下也是闪烁效果...
CSS实现图片轮播效果，图片闪烁效果，只需要一个函数即可！
qq_31493411的博客
09-23 1276
在html中调用css： <img src="2.1.png" style="position:absolute;" class="play"> 在css中写入如下代码，实现图片的移动，轮播。 .play { animation: ma 30s ease-out infinite alternate; /**/ } ...
css3无缝滚动效果,Css3实现无缝滚动防抖
weixin_35735685的博客
08-03 471
问题图片加文字的无缝滚动，在手机端的效果总体还行，但是图片在手机某些浏览器会抖得腻害！错误写法不能用left，margin-left,像这种写法:.donghua.active{animation: scoll ease-in-out 1s infinite alternate;-webkit-animation: scoll ease-in-out 1s infinite alternate;}...
css3 transition transform属性造成文字抖动
热门推荐
weetch的博客
07-31 1万+
现象：信息栏第一行文字，最后总会抖动
CSS加关键帧动画切换背景图片闪烁问题修复
qq_42356513的博客
03-07 2886
问题描述 给一个div加个关键帧动画,动态改变背景图片,会出现首次进入页面这个div背景图片出现抖动问题 css示例 // 这样会出现抖动 .demo { width: 100px; height: 100px; animation: demo 2s linear infinite; } @keyframes demo { 0% { background: url('1.png') no-repeat; backgrou
css3帧动画无缝衔接会闪一下,css3 Transition动画执行时有可能会出现闪烁的bug
weixin_42347660的博客
08-04 730
2016 Al-Baath University Training Camp Contest-1 DDescription X is well known artist, no one knows the secrete behind the beautiful paintings of X exc ...oracle Array类型作为参数传入函数&lpar;存储过程&rpar;...
css3的动画卡顿闪屏@酷酷的小航航
kukuhang的博客
11-05 1095
css3的动画卡顿比较厉害 于是找各种方法 并一一去试 学会简单的处理方法和部分渲染原理 是否启用硬件加速GPU (Graphics Processing Unit)? “用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。 开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。 尽量...
uniapp中使用swiper轮播以及解决自动，手动切换页面抖动问题
在无知中学习，在学习中成长，在成长中学习
08-20 6463
uniapp中使用swiper轮播以及解决自动，手动切换页面抖动问题 <template> <view class="banner-wrap"> <swiper class="banner-swiper" :current="current" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration"
轮播图 导致 之后的文字内容 跟着 一起 闪动！如何解决？
lu12077的博客
10-28 1415
前端 页面的 开发中，，发现轮播图功能 后面的 一部分内容跟着 轮播图 一起 闪动 核查了一番 样式后， 发现 后面 div盒子 样式：position:relative;（absolute，sticky也会导致一起闪动） 然后去掉 或者修改为： initial，inherit，static，unset 即可成功 去除 轮播图导致的 闪动问题！ 注意：fixed弹性盒子也不会 受轮播图影响！ ...
移动端使用transition，动画发生抖动
炯炯灯的博客
04-20 7775
transition 使用对象尽量不要使用 all，最好也不要对元素的 left top 等属性使用transition元素移动动画可以使用translate实现，（translate没有缓冲动画）但是可以对translate使用transition 如：  transform: translateX(300px)        transition: transform 2s  ease这样配套...
html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图
最新发布
05-25
可以使用CSS3的transition属性来实现图片的淡入淡出效果。具体步骤如下： 1. 在HTML中创建一个包含图片的容器，如下： ``` <img src="image3.jpg"> ``` 2. 使用CSS样式设置容器的宽度和高度，并将容器中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值