<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS加载</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
.col-sm-3 {
height: 100px;
margin: 15px 0;
}
.col-sm-3 div {
color: #fff;
}
.col-sm-3:nth-child(2n) {
background-color: #ff6a00;
}
.col-sm-3:nth-child(2n+1) {
background-color: #0094ff;
}
</style>
</head>
<body>
<!--https://zhuanlan.zhihu.com/p/350607485-->
<div id="mainDiv">
<div class="row">
<!--示例1-->
<div class="col-sm-3">
<style>
.spinner1 {
width: 40px;
height: 40px;
background-color: #fff;
margin: 20px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
<div class="spinner1"></div>
</div>
<!--示例2-->
<div class="col-sm-3">
<style>
.sk-chase {
width: 40px;
height: 40px;
position: relative;
animation: sk-chase 2.5s infinite linear both;
margin: 20px auto;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
@keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
@keyframes sk-chase-dot {
80%, 100% {
transform: rotate(360deg);
}
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%, 0% {
transform: scale(1.0);
}
}
</style>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>
<!--示例3-->
<div class="col-sm-3">
<style>
.spinner3 {
width: 40px;
height: 40px;
position: relative;
margin: 20px auto;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -
HTML中的loading样式通常指的是在页面内容加载过程中展示的动画效果,用于告知用户页面正在加载,提升用户体验。在前端开发中,这些loading样式可以是简单的文本提示,也可以是复杂的图形动画。下面将详细介绍十三种常见的HTML loading样式及其相关知识点: 1. **纯文本样式**:最基础的加载样式,如“加载中...”,可以通过CSS控制文字颜色、大小、动画效果等。 2. **旋转图标**:例如经典的加载小菊花,可以使用CSS3的transform属性和animation属性实现旋转动画。 3. **线条动画**:通过CSS绘制线条并利用keyframes动画改变线条的状态,如逐段填充、旋转、缩放等。 4. **百分比加载**:显示加载进度,可以使用HTML5的progress元素配合JavaScript计算并更新进度。 5. **SVG动画**:使用SVG矢量图进行加载动画设计,可实现平滑的图形变换,且文件体积小。 6. **环形进度条**:通过CSS3的border-radius和animation创建环形填充动画,展示加载进度。 7. **点状加载**:点点滴滴的动画效果,常表现为“.”、“..”、“...”,使用CSS的animation延迟属性实现。 8. **彩色块动画**:多个彩色方块依次或同步加载,可通过CSS的flex布局和animation实现。 9. **3D加载**:利用CSS3的transform-style和perspective属性创建3D空间内的加载动画。 10. **文字变形动画**:如字母流动、拼接等效果,结合CSS3的transition和animation完成。 11. **背景渐变动画**:加载时背景颜色或图案动态变化,利用CSS的background-image和animation制作。 12. **图片加载过渡**:图片未加载时显示加载动画,加载完成后平滑过渡到图片,可结合JavaScript监听load事件。 13. **自定义图标动画**:设计师可以创建独特的加载图标,用CSS3的keyframes和transform属性制作动画效果。 在实际应用中,开发者可以根据项目需求选择合适的加载样式,并通过CSS和JavaScript进行定制。对于性能优化,可以考虑使用懒加载技术,只在用户滚动到相应区域时加载资源,减少初始页面的加载时间。同时,合理运用服务端渲染和预加载策略也能有效提升用户体验。 了解和掌握这些HTML loading样式,能够使前端开发者在构建网页时提供更加友好的用户体验,特别是在内容较多或加载时间较长的页面中,良好的加载动画设计至关重要。通过不断实践和创新,我们可以创造出更多独特且吸引人的加载效果。
- 1
- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整
- 粉丝: 1
- 资源: 7
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 该仿真主要应用于路径规划和轨迹跟踪的研究 主要有五个文件(内部包含3个算法,两个仿真),1.A星算法自动生成避障的最短路径,2.两轮小车及其四轮小车的运动学建模3.纯路径跟踪算法,包括预锚点的选择算
- Edifier Connect_8.4.11.apk
- anaconda配置pytorch环境.md
- 机械设计自动倒角机sw18可编辑非常好的设计图纸100%好用.zip
- 基于28027滑膜算法的水泵驱动方案,带有初始定位算法,启动不反转,pfc采用硬件方案
- 机械设计自动PCM板胶纸机sw18非常好的设计图纸100%好用.zip
- 三相PWM整流器闭环仿真,电压电流双闭环控制,输出直流电压做外环 模型中包含主电路,坐标变,电压电流双环PI控制器,SVPWM控制,PWM发生器 matlab simulink模型 功率因数1,低TH
- anaconda配置pytorch环境.md
- Cytoscape-3-10-3-windows-64bit-仅限个人学习
- DDR3测试模块 fpga测试接口模块,提供测试模块工程 Vivado2019.1或者Vivado2017.4;语言vhdl 可以修改ip引脚,测试初始化完成
- 网络工程领域竞赛试题:网络搭建与应用的技术实战项目
- 山东大学软件学院人工智能导论22级复习资料
- 机械设计自动切断面条机ZD80sw16非常好的设计图纸100%好用.zip
- 毕设基于stm32的风机监控系统程序设计源码.zip
- 机械设计自动贴E型定位胶纸机sw18非常好的设计图纸100%好用.zip
- 机械设计自动贴E型胶纸机sw18非常好的设计图纸100%好用.zip