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. muduo 网络库的整体架构图和一个简化版本的架构设计

    https://blog.csdn.net/adkada1/article/details/54342275 简析 https://blog.csdn.net/amoscykl/article/det ...

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

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

  3. IO多路复用与epoll机制浅析

    epoll是Linux中用于IO多路复用的机制,在nginx和redis等软件中都有应用,redis的性能好的原因之一也就是使用了epoll进行IO多路复用,同时epoll也是各大公司面试的热点问题. ...

  4. 最简单直接地理解Java软件设计原则之接口隔离原则

    理论性知识 定义 接口隔离原则, Interface Segregation Principle,(ISP). 一个类对应一个类的依赖应该建立在最小的接口上: 建立单一接口,不要建立庞大臃肿的接口: ...

  5. Java学习路线图（）

    阶段1 1:学习HTML 2:学习CSS 3:Javascript 4:jquery 5:xml解析 6:Bootstrap 阶段2 7:JAVAse基础 8:mysql数据库 9:Powerdesi ...

  6. Tomcat 详解URL请求

    这里分析一个实际的请求是如何在Tomcat中被处理的,以及最后是怎么样找到要处理的Servlet的?当我们在浏览器中输入http://hostname:port/contextPath/servlet ...

  7. hbase伪分布式环境的搭建

    一,实验环境: 1, ubuntu server 16.04 2, jdk,1.8 3, hadoop 2.7.4 伪分布式环境或者集群模式 4, hbase-1.2.6.tar.gz 二,环境的搭建 ...

  8. CAS客户端和服务器配置https证书

    关于如何生成https证书可以看这篇文章: java生成Https证书,及证书导入的步骤和过程 下面整理cas如何整合https: cas服务器端部署(TLS[https]) 1.生成证书: 参照ja ...

  9. 如何安装Python 3.9.1?

    首先打开浏览器输入网址:https://www.python.org或者通过百度搜索python进入Python官网. 选择Downloads,弹出最新版本下载链接,当前版本为3.9.1,如图所示: ...

  10. JDK中jps、jinfo、jstat、jstack、jmap、jconsole等命令简介

    JDK提供了几个很实用的工具,如下: jinfo:观察运行中的java程序的运行环境参数:参数包括Java System属性和JVM命令行参数,java class path等信息.命令格式:jinf ...