css skeleton & web app skeleton

skeleton

https://www.cnblogs.com/xgqfrms/p/10437258.html

https://github.com/dhg/Skeleton/

https://codepen.io/xgqfrms/pen/zQEJWw

https://codepen.io/xgqfrms/details/zQEJWw

https://codepen.io/xgqfrms/full/zQEJWw

https://github.com/dhg/Skeleton/

https://github.com/whatsnewsaes/Skeleton-Sass

skeleton screens

https://css-tricks.com/building-skeleton-screens-css-custom-properties/



.skeleton {

  background-repeat: no-repeat;

  background-image:

    /* layer 2: avatar */

    /* white circle with 16px radius */

    radial-gradient(circle 16px, white 99%, transparent 0),

    /* layer 1: title */

    /* white rectangle with 40px height */

    linear-gradient(white 40px, transparent 0),

    /* layer 0: card bg */

    /* gray rectangle that covers whole element */

    linear-gradient(gray 100%, transparent 0);

}




.skeleton {

  background-size:

    32px 32px,  /* avatar */

    200px 40px, /* title */

    100% 100%;  /* card bg */

}




.skeleton {

  background-position:

    24px 24px,  /* avatar */

    24px 200px, /* title */

    0 0;        /* card bg */

}

Custom CSS properties & css var

https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/



.skeleton {

  /*

    define as separate properties

  */

  --card-height: 340px;

  --card-padding:24px;

  --card-skeleton: linear-gradient(gray var(--card-height), transparent 0);

  --title-height: 32px;

  --title-width: 200px;

  --title-position: var(--card-padding) 180px;

  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);

  --avatar-size: 32px;

  --avatar-position: var(--card-padding) var(--card-padding);

  --avatar-skeleton: radial-gradient(

    circle calc(var(--avatar-size) / 2),

    white 99%,

    transparent 0

  );

  /*

    now we can break the background up

    into individual shapes

  */

  background-image:

    var(--avatar-skeleton),

    var(--title-skeleton),

    var(--card-skeleton);

  background-size:

    var(--avatar-size),

    var(--title-width) var(--title-height),

    100% 100%;

  background-position:

    var(--avatar-position),

    var(--title-position),

    0 0;

}

http://caniuse.com/#feat=css-variables



@media screen and (min-width: 47em) {

  :root {

    --card-padding: 32px;

    --card-height: 360px;

  }

}

Animation



<div class="card"></div>




/*

 * Variables

 */

:root {

  --card-padding: 24px;

  --card-height: 340px;

  --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);

  --avatar-size: 32px;

  --avatar-position: var(--card-padding) var(--card-padding);

  --avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0

  );

  --title-height: 32px;

  --title-width: 200px;

  --title-position: var(--card-padding) 180px;

  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);

  --desc-line-height: 16px;

  --desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);

  --desc-line-1-width:230px;

  --desc-line-1-position: var(--card-padding) 242px;

  --desc-line-2-width:180px;

  --desc-line-2-position: var(--card-padding) 265px;

  --footer-height: 40px;

  --footer-position: 0 calc(var(--card-height) - var(--footer-height));

  --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);

  --blur-width: 200px;

  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));

}

/*

 * Card Skeleton for Loading

 */

.card {

  width: 280px; //demo

  height: var(--card-height);

  &:empty::after {

    content:"";

    display:block;

    width: 100%;

    height: 100%;

    border-radius:6px;

    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:

      linear-gradient(

        90deg,

        rgba(lightgrey, 0) 0,

        rgba(lightgrey, .8) 50%,

        rgba(lightgrey, 0) 100%

      ),                          //animation blur

      var(--title-skeleton),      //title

      var(--desc-line-skeleton),  //desc1

      var(--desc-line-skeleton),  //desc2

      var(--avatar-skeleton),     //avatar

      var(--footer-skeleton),     //footer bar

      var(--card-skeleton)        //card

    ;

    background-size:

      var(--blur-size),

      var(--title-width) var(--title-height),

      var(--desc-line-1-width) var(--desc-line-height),

      var(--desc-line-2-width) var(--desc-line-height),

      var(--avatar-size) var(--avatar-size),

      100% var(--footer-height),

      100% 100%

    ;

    background-position:

      -150% 0,                      //animation

      var(--title-position),        //title

      var(--desc-line-1-position),  //desc1

      var(--desc-line-2-position),  //desc2

      var(--avatar-position),       //avatar

      var(--footer-position),       //footer bar

      0 0                           //card

    ;

    background-repeat: no-repeat;

    animation: loading 1.5s infinite;

  }

}

@keyframes loading {

  to {

    background-position:

      350% 0,

      var(--title-position),

      var(--desc-line-1-position),

      var(--desc-line-2-position),

      var(--avatar-position),

      var(--footer-position),

      0 0

    ;

  }

}

/*

 * Demo Stuff

 */

body {

  min-height:100vh;

  background-color:#FFF;

  display:flex;

  justify-content:center;

  align-items:center;

}

:empty selector & pseudo element

CSS & Card Skeleton

https://codepen.io/xgqfrms/pen/KLXrob

https://codepen.io/xgqfrms/pen/gJGQeX

web app demos

https://cangdu.org/elm/#/shop?geohash=31.278702,121.465513&id=3276

CSS Pseudo Selectors

::slotted & :empty

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty



/* Selects any element placed inside a slot */

::slotted(*) {

  font-weight: bold;

}

/* Selects any <span> placed inside a slot */

::slotted(span) {

  font-weight: bold;

}

https://css-tricks.com/building-skeleton-screens-css-custom-properties/

  1. You can use the :empty selector and a pseudo element to draw the skeleton, so it only applies to empty card elements.

    Once the content is injected, the skeleton screen will automatically disappear.

/* css skeleton */

/*

 * Card Skeleton for Loading

 */

.card {

  width: 280px; //demo

  height: var(--card-height);

  &:empty::after {

    content:"";

    display:block;

    width: 100%;

    height: 100%;

    border-radius:6px;

    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:

      linear-gradient(

        90deg,

        rgba(lightgrey, 0) 0,

        rgba(lightgrey, .8) 50%,

        rgba(lightgrey, 0) 100%

      ),                          //animation blur

      var(--title-skeleton),      //title

      var(--desc-line-skeleton),  //desc1

      var(--desc-line-skeleton),  //desc2

      var(--avatar-skeleton),     //avatar

      var(--footer-skeleton),     //footer bar

      var(--card-skeleton)        //card

    ;

    background-size:

      var(--blur-size),

      var(--title-width) var(--title-height),

      var(--desc-line-1-width) var(--desc-line-height),

      var(--desc-line-2-width) var(--desc-line-height),

      var(--avatar-size) var(--avatar-size),

      100% var(--footer-height),

      100% 100%

    ;

    background-position:

      -150% 0,                      //animation

      var(--title-position),        //title

      var(--desc-line-1-position),  //desc1

      var(--desc-line-2-position),  //desc2

      var(--avatar-position),       //avatar

      var(--footer-position),       //footer bar

      0 0                           //card

    ;

    background-repeat: no-repeat;

    animation: loading 1.5s infinite;

  }

}

@keyframes loading {

  to {

    background-position:

      350% 0,

      var(--title-position),

      var(--desc-line-1-position),

      var(--desc-line-2-position),

      var(--avatar-position),

      var(--footer-position),

      0 0

    ;

  }

}

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

css skeleton & web app skeleton的更多相关文章

  1. HTML5最佳实践web app

    简介 本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合 ...

  2. [转] Creating a Simple RESTful Web App with Node.js, Express, and MongoDB

    You can find/fork the sample project on GitHub Hey! This and all my other tutorials will soon be mov ...

  3. web app开发技巧总结 （share）

    (转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...

  4. Web APP 之rem的使用

    移动端web app的开发,之前开发直接使用px像素做单位,这样子做对于传统的PC端开发来说,个人比较习惯,但是对于移动端在来,有说逞强.最明显是切图效果与设计师想达到的效果有些差距,比如<he ...

  5. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  6. Web APP开发技巧总结(转）

    一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta h ...

  7. 12步创建高性能Web APP

    现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验.阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度.渲染时间和其他方面的性能表现. 概述 对 Web App ...

  8. MontageJS：构建现代 Web App 的 HTML5 框架

    MontageJS 可以帮助您构建高可扩展性和可维护性的 HTML5 应用.有了 MontageJS,开发人员可以创建可重用的用户界面组件和模块,组件和控制器之间的绑定属性,并且同步 DOM 查询和更 ...

  9. web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码

    来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...

随机推荐

  1. 1、剑指offer-数组——二维数组中的查找

    *题目描述* **在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含 ...

  2. 可视化Go内存管理

    小结: 1. Go不需要VM,Go应用程序二进制文件中嵌入了一个小型运行时(Go runtime),可以处理诸如垃圾收集(GC),调度和并发之类的语言功能 Go does not need a VM ...

  3. 为什么要内存对齐？Go 语言有时也需要考虑对齐的问题

    https://mp.weixin.qq.com/s/NE6Y2TVxrl-cpY-36puQcQ

  4. py, pyc, pyw, pyo, pyd Compiled Python File (.pyc) 和Java或.NET相比，Python的Virtual Machine距离真实机器的距离更远

    https://my.oschina.net/renwofei423/blog/17404 1.      PyCodeObject与Pyc文件 通常认为,Python是一种解释性的语言,但是这种说法 ...

  5. python 9学习 高级特性

    高级特性 掌握了Python的数据类型.  语句      和函数,基本上就可以编写出很多有用的程序了. 比如构造一个1, 3, 5, 7, ..., 99的列表,可以通过循环实现: L = [] n ...

  6. 6到8个月如何达到三年加得前端经验，对标P7，“慕课网 Java工程师2020”

    百度网盘链接:https://pan.baidu.com/s/1xshLRO3ru0LAsQQ0pE67Qg 提取码:bh9f   阶段一:课程设计及前端创建脚手架开发 第1周   需求分析和架构设计 ...

  7. vim快捷键收藏版

    总述 附加一篇介绍文哈,关于vim快捷键的介绍.vim和vscode 到底谁更好用,大家争得不可开交,然后我就在vscode里面装了一个vim插件,完美得解决了这个问题,用完之后觉得真香,所以我就整理 ...

  8. 手动合并hadoop namenode editlog

    一. 基本概念 1.NN恢复实际上是由fsimage开始(这个相当于数据的base),如果有多个fsimage,会自动选择最大的fsimage,然后按照editlog序列日志开始执行日志 2.seen ...

  9. 2019 ICPC 上海区域赛总结

    2019上海区域赛现场赛总结 补题情况(以下通过率为牛客提交): 题号 标题 已通过代码 通过率 我的状态 A Mr. Panda and Dominoes 点击查看 5/29 未通过 B Prefi ...

  10. POJ 1743 Musical Theme【SAM】

    POJ1743 Musical Theme 要找长度\(\ge 5\)且出现次数\(\ge 2\)并且第一次出现和最后一次出现不重叠的最长子串. 题目条件中,如果对于两个串,在一个串的每个数上都加上相 ...