anybike 2019-01-04 11:12 采纳率: 0%
浏览 1907

keyframes 背景轮播 首次加载轮播出现闪烁如何解决

##问题描述
使用keyframes制作背景轮播效果,第一次加载切换中间出现白色闪烁,第二遍轮播就没有问题了;
backface-visibility:hidden;
transform-style: preserve-3d; 使用后无效果

##代码

body{
            background: url(img/background1.jpg);
            animation-name:myfirst;
            animation-duration:12s;
            /*变换时间*/
            animation-delay:2s;
            /*动画开始时间*/
            animation-iteration-count:infinite;
            /*下一周期循环播放*/
            animation-play-state:running;
            /*动画开始运行*/
            backface-visibility:hidden;
            -webkit-backface-visibility: hidden;
            /*隐藏转换的元素的背面-无效*/
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d; 
            /*使被转换的元素的子元素保留其 3D 转换-无效*/
        }
        @keyframes myfirst
        {
            0%   {background:url(img/background1.jpg);}
            34%  {background:url(img/background2.jpg);}
            67%  {background:url(img/background3.jpg);}
            100% {background:url(img/background1.jpg);}
        }
  • 写回答

1条回答 默认 最新

  • 松鼠住松树 2019-05-13 09:06
    关注

    由于图片加载,会导致有短暂的空白期,可以预先加载好图片,方法很多,给个最简单的:
    css直接一次性加载:

    background: url("img/4.jpg"),url("img/5.jpg"),url("img/6.jpeg"),url("img/7.jpg");
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题