pk10开奖

这篇文章主要介绍了浅谈只要css就能实现的骨架屏方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

pk10开奖线上体验地址 http://jsfiddle.net/z13wtr0q/

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

优点

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

缺点

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

思路
 

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

实现

pk10开奖css部分(scss写法)

pk10开奖通过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部分

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

js部分

控制好skt-loading类的切换

使用注意

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

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

最新资讯
特斯拉终止信心保障计划 是不愁销量还是力不从心?

特斯拉终止信心保障计

一方面,可能是特斯拉对中国市场销量并不担心,不再需要信
马云拿到A股“准生证”!蚂蚁集团代码688688,估值2万亿元

马云拿到A股“准生证

蚂蚁集团更新后的招股意向书显示,本次发行的初步询价时
探访二三线城市脱口秀俱乐部:从2.99元门票起步的梦想

探访二三线城市脱口秀

笑果文化与单立人已成为行业内两大风向标,地方脱口秀俱
特斯拉频繁降价惹争议 不断透支品牌声誉又为哪般?

特斯拉频繁降价惹争议

据不完全统计,从Model 3上市至今不到一年时间,该车系售
阿里巴巴已同意认购7.3亿股蚂蚁集团A股股份

阿里巴巴已同意认购7.

今天阿里巴巴在港交所公告称,目前持有蚂蚁集团普通股及
蚂蚁集团29日开始“打新” 天猫已认购7.3亿股

蚂蚁集团29日开始“打

阿里巴巴集团的全资子公司浙江天猫技术有限公司将作为
最新文章
浅谈只要css就能实现的骨架屏方案

浅谈只要css就能实现

这篇文章主要介绍了浅谈只要css就能实现的骨架屏方案,
5个HTML5的常用本地存储方式详解与介绍

5个HTML5的常用本地存

在HTML5规范之前,存储主要是用cookies,但cookies缺点有
CSS代码检查工具stylelint的使用方法详解

CSS代码检查工具style

stylelint是一个强大的现代CSS检测器,可以让开发者在
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最