蝙蝠岛资源网 Design By www.hbtsch.com

线上体验地址 https://jsfiddle.net/z13wtr0q/

先说优缺点,毕竟骨架屏实现的方案有很多种

优点

  • 简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护
  • 定制程度高,想怎么搞就怎么搞
  • 不臃肿,只给你想要的

缺点

  • 自动化程度低,需要在骨架dom上手动添加类
  • 协同要求高,不像工程化能通过工程去约束

思路
 

通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换

实现

css部分(scss写法)

通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上

  .skt-loading {
    pointer-events: none; /* 加载中阻止事件 */
    .skeleton {
      position: relative;
      overflow: hidden;
      border: none !important;
      border-radius: 5px;
      background-color: transparent !important;
      background-image: none !important;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background-color: #EBF1F8;
        display: block;
      }
      
      /* 下面这部分都是自定义的,看需求修改 */
      &:not(.not-round)::after {
        border-radius: 4px;
      }
      &:not(.not-before)::before {
        position: absolute;
        top: 0;
        width: 30%;
        height: 100%;
        content: "";
        background: linear-gradient(to right,rgba(255,255,255,0) 0,
            rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
        transform: skewX(-45deg);
        z-index: 99;
        animation: skeleton-ani 1s ease infinite;
        display: block;
      }
      &.badge {
        &::after {
          background-color: #F8FAFC;
        }
      }
    }
  }

  @keyframes skeleton-ani { /* 骨架屏动画 */
    from {
      left: -100%;
    }
    to {
      left: 150%;
    }
  }

html部分

只需要在你认为合理的骨架粒度元素上添加skeleton类即可

js部分

控制好skt-loading类的切换

使用注意

  • after伪元素无法插入到inputimg等非容器元素中,所以如果需要添加skleton,则需要再加一层元素将其包裹
  • 对于像vuereact数据驱动页面需要先有mock数据以生成dom

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
css,骨架屏

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“浅谈只要css就能实现的骨架屏方案”

暂无浅谈只要css就能实现的骨架屏方案的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。