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. linux 文件结构体和文件描述符号的学习

    https://blog.csdn.net/cywosp/article/details/38965239

  2. 2021年Web开发的7大趋势

    技术发展日新月异,所以 Web 开发人员也需要及时了解行业最新的发展趋势. 全球有超过 17.4 亿个网站.在每一个细分领域都有无数企业争夺搜索引擎的排名前列位置.开发人员应该了解和发现更多创新的 W ...

  3. 编译安装 codeblocks 20.03 mips64el

    期末考试要用哦,不然谁会愿意去踩这么多坑. qaq 龙梦 Fedora28 中有 codeblocks 17.12,但是 Ctrl-v 粘贴会闪退,导致压根不能用.Bing了一下发现这其实是 code ...

  4. 「笔记」数位DP

    目录 写在前面 引入 求解 特判优化 代码 例题 「ZJOI2010」数字计数 「AHOI2009」同类分布 套路题们 「SDOI2014」数数 写在最后 写在前面 19 年前听 zlq 讲课的时候学 ...

  5. 题解 UVA11694 【Gokigen Naname谜题 Gokigen Naname】

    题目 题解 考场上连暴力都不会打的码农题,深搜是真的难 /kk 前置问题 怎么输出"\" cout<<"\\"; 2.怎么处理不在一个环里,可以考虑 ...

  6. Docker+Prometheus+Alertmanager+Webhook钉钉告警

    Docker+Prometheus+Alertmanager+Webhook钉钉告警 1.环境部署 1.1 二进制部署 1.2 docker部署 1.2.1 webhook 1.2.2 alertma ...

  7. docker版mysql的使用和配置（2）——docker版mysql的dockerfile

    既然目标是定制满足自己需要的dockerfile,那么就来看看mysql的dockerfile长什么样. dockerfile选择的是 https://github.com/mysql/mysql-d ...

  8. MySQL数据库操作生成UUID

    问题描述: 通过数据库操作,生成无横线的uuid,同时插入至数据库之中. 因为我要给项目做一些测试数据,项目的主键为32位无'-'的uuid,然后在数据库中,通过数据库操作,然后插入一些测试数据. 生 ...

  9. Spark练习之wordcount，基于排序机制的wordcount

    Spark练习之wordcount 一.原理及其剖析 二.pom.xml 三.使用Java进行spark的wordcount练习 四.使用scala进行spark的wordcount练习 五.基于排序 ...

  10. LINUX中备份mysql数据库

    1.在LINUX中创建备份目录 如:/home/backup   2.把sh脚本放到备份目录下   脚本如下 https://wws.lanzous.com/i1oCxlccapa密码:dter   ...