效果
自上而下渐隐渐现
源码
html,用的angular语法,只要做简单的修改就可以成为你需要的语法
<div *ngFor="let item of [1,1,1],index as index" class="skeletonItem anim-opacity2 animation-delay{{index}}"> <div class="skeletonText "></div> <div class="skeletonText" style="width:70%"></div> <div class="skeletonText" style="width:40%"></div> </div>
css
.skeletonItem { padding: 16px; border-bottom: 3px solid #eee; } .skeletonText { height: 16px; background: #e2e2e2; margin-top: 12px; border-radius: 4px; } .skeletonText:first-child { margin-top: 0; } .anim-opacity2 { animation: 1.5s opacity2 0s infinite; } .animation-delay0 { animation-delay: 0s; } .animation-delay1 { animation-delay: 0.5s; } .animation-delay2 { animation-delay: 1s; } @keyframes opacity2 { 0% { opacity: 0.5 } 50% { opacity: 1; } 100% { opacity: 0.5; } }
总结
到此这篇关于css+html实现Skeleton Screen 加载占位图动画效果(带动画)的文章就介绍到这了,更多相关Skeleton Screen 加载占位图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
对任何网站来说,颜色都是最重要的元素之一,对观众有着巨大的影响,因而对颜色...
我们在用Dreamweaver制作网页时常常会用到插入空格,当按空格时只会出现一个半角...
Dreamweaver在进行动态网页制作的时候(这里以asp网页为例进行介绍),需要调用...
注:使用的是的模块注入方式,适用各种前端单页面应用及H5 创建一个AMap.js文件 ...
上一次有一位非常好学的粉丝儿问可不可以把月亮做一个呼吸灯效果,因为没有找到...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
因为要验证我的几个应用能否移植到鸿蒙,仔细看了下鸿蒙,当然作为开发者,肯定...
前言 There are a thousand Hamlets in a thousand people's eyes. 一千个程序员...
在最新的 Chrome Canary 中,一个有意思的 CSS 语法 Container Queries 得到了支...
序 本文主要研究一下xxl-job-executor-go的Task Task //任务type Task struct { ...