css 加载效果
时间:2021-09-05
本文章向大家介绍css 加载效果,主要包括css 加载效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
预加载文章段落
使用 三行背景色,首行(透明+灰)、尾行(灰+透明)、中间行(重复灰)
---copy
<div class="loading_p border"></div>
// scss
.load_Ping{
$line: 3;
$baseWidth: 32px;
$padding: 40px;
$baseColor: #eee;
min-height: ($baseWidth * ($line + 2) + ($padding * 2));
box-sizing: border-box;
padding: $padding;
background-image: linear-gradient(90deg,transparent 0px, transparent 40px,$baseColor $padding),repeating-linear-gradient(180deg,$baseColor 0px, $baseColor ($baseWidth/2),transparent ($baseWidth/2),transparent $baseWidth), linear-gradient(90deg,$baseColor 70%, transparent 70%);
background-size:calc(100% - #{$padding * 2}) ($baseWidth/2), calc(100% - #{$padding * 2}) ($baseWidth * $line),calc(100% - #{$padding * 2}) ($baseWidth/2);
background-repeat:no-repeat;
background-position:$padding $padding, $padding ($padding + $baseWidth), $padding ($padding + (($baseWidth * ($line + 1))));
}
预加loading
通过动画实现 animation: aniLoading 1s linear infinite
---copy
<div class="loading_p border"></div>
@keyframes aniLoading {
0% {transform: translate(-50%,-50%) rotate(0deg)}
100% {transform: translate(-50%,-50%) rotate(360deg)}
}
.loading{ position: relative; height: 200px; }
.loading::before{
content: ''; position: absolute; height: 6px; width: 30px; border-left: 4px solid #91ae83;
border-right: 4px solid #91ae83; box-sizing: border-box; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
transform-origin: 50% 50%; animation: aniLoading 1s linear infinite ; z-index: 101;
}
.loading::after{ content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.8); z-index: 100;}
通过逐帧动画的方式 animation: aniLoading2 1s infinite step-start step-start 连接
---copy
<div class="boxgray">
<div class="loading2"></div>
</div>
@keyframes aniLoading2 {
0% {transform: translate(-50%,-50%) rotate(360deg)}
16% {transform: translate(-50%,-50%) rotate(300deg)}
33% {transform: translate(-50%,-50%) rotate(240deg)}
49% {transform: translate(-50%,-50%) rotate(180deg)}
66% {transform: translate(-50%,-50%) rotate(120deg)}
82% {transform: translate(-50%,-50%) rotate(60deg)}
100% {transform: translate(-50%,-50%) rotate(0deg)}
}
.loading2 {
position: absolute; height: 6px; width: 40px; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
border-left: 4px solid rgba(115,141,101,1);
border-right: 4px solid rgba(115,141,101,0.4);
box-sizing: border-box; animation: aniLoading2 1s infinite step-start;
}
.loading2::before{
content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(60deg);
border-left: 4px solid rgba(115,141,101,0.8);
border-right: 4px solid rgba(115,141,101,0.2);
}
.loading2::after{
content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(120deg);
border-left: 4px solid rgba(115,141,101,0.6);
border-right: 4px solid rgba(115,141,101,0);
}
原文地址:https://www.cnblogs.com/voxov/p/15215926.html
- Android中应用调用系统权限
- Android5.0以后隐式启动ServiceBug
- Android6.0源码分析之录音功能(一)
- Android6.0源码开发之修改默认音量default及max和min
- Android源码开发之添加/删除系统应用
- 按键事件处理
- Android6.0锁屏源码分析之界面布局分析
- Android6.0源码分析之menu键弹出popupwindow菜单流程分析
- Android中初步自定义view
- Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)
- Android蓝牙配对弹出框过程分析 Android蓝牙配对弹出框过程分析
- Android6.0之修改或者查看系统属性值
- linux下Android7.0多用户编译问题
- 带你解锁蓝牙skill(0)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- PAT (Basic Level) Practice (中文)1021 个位数统计 (15 分)
- PAT (Basic Level) Practice (中文)1049 数列的片段和 (20 分)
- PAT (Basic Level) Practice (中文)1022 D进制的A+B (20 分)
- [900]mysql字符串数字互转
- 技术分享 | Semi-join Materialization 子查询优化策略
- 前端性能和错误监控
- Network在单细胞转录组数据分析中的应用
- PAT (Basic Level) Practice (中文)1024 科学计数法 (20 分)
- PAT (Basic Level) Practice (中文)1053 住房空置率 (20 分)
- 解决vue+axios请求报错POST http: net::ERR_CONNECTION_REFUSED,在封装的请求中统一处理请求异常的问题
- PAT (Basic Level) Practice (中文)1025 反转链表 (25 分)
- Pytest+Allure接口自动化一些学习分享
- 数据结构___马踏棋盘详尽实现+报告+通俗易懂注释
- 使用elasticsearch-dump迁移elasticsearch集群数据
- PAT (Basic Level) Practice (中文)1027 打印沙漏 (20 分)