CSS3——制作正在加载页面loading...
今天做了好多小东西，还挺开心的~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正在加载中...</title>
<style type="text/css">
.box{
width:300px;
height:125px;
border:1px solid #000;
margin:200px auto 0;
} .box p{
text-align: center;
width:100%;
float:left;
/*p标签默认有样式*/
margin:0;
padding:0;
} .box div{
width:30px;
height:70px;
margin:15px;
float: left;
background-color: hotpink;
border-radius:10px;
} .box div:nth-child(1){
background-color: lightcoral;
/*缩、放 这是两次，所以是2*/
/*animation:loading 0.5s ease 0s 2 alternate;*/
animation: loading 0.5s ease 0s infinite alternate;
}
.box div:nth-child(2){
background-color: darkorange;
animation: loading 0.5s ease 0.1s infinite alternate;
}
.box div:nth-child(3){
background-color: lightcoral;
animation: loading 0.5s ease 0.2s infinite alternate;
}
.box div:nth-child(4){
background-color: gold;
animation: loading 0.5s ease 0.3s infinite alternate;
}
.box div:nth-child(5){
background-color: burlywood;
animation: loading 0.5s ease 0.4s infinite alternate;
} @keyframes loading{
from{
/*缩放y轴*/
transform:scaleY(1)
} to{
transform: scaleY(0.5);
} }
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...</p>
</div>
</body>
</html>
成品展示：
是不是还萌萌哒~
CSS3——制作正在加载页面loading...的更多相关文章
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- css3动画特效：纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- flutter 入口文件配置路由+加载页面
入口文件配置路由 1.路由信息 -- 加载页面 ,通常用于显示新的内容或者广告,加载完成之后进入主页面 -- 主页面 /app 2.配置页面 main.dart main.dart // main ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- 加载页面（Loading）
/* 文件说明:页面加载时Loading JS 文件描述:解决IE或FF下,初始化加载时,页面布局乱掉的问题,参考:*/var width = $(window).width();var height ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- 页面加载时loading效果
页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
随机推荐
- Octavia 项目加速 OpenStack LBaaS 落地大规模应用场景
目录 文章目录 目录 OpenStack LBaaS Octavia 软件架构 网络架构 操作对象基本概念 功能实现基本概念 Ocatvia Daemon 列表 部署 Ocatvia 手动方式集成 O ...
- Eclipse设置保存时自动格式化代码
在使用eclipse时,经常需要使用到Ctrl+Shift+F来格式化代码,可以打开保存时格式化,会更方便. 打开方式:Window-->Preferences-->Java --> ...
- Monkey测试：启动adb shell失败
1.在dos环境下输入adb shell 2.遇到adb server version doesn't match this client:killing错误 如: 3.在遇到如上问题时,输入adb ...
- 用apicloud+vue的VueLazyload实现缓存图片懒加载
<script src="../../script/vue-lazyload.js"></script><img v-lazy="remot ...
- CSS3——边框 圆角 背景 渐变 文本效果
边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...
- 【MM系列】SAP MM模块-配置PO的创建时间
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-配置PO的创建时间 ...
- 实验报告5&第七周课程总结
实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 Java 系统包的结构. ...
- Dubbo原理学习
Dubbo源码及原理学习 阿里中间件团队博客 Dubbo官网 Dubbo源码解析 Dubbo源码解析-掘金 Dubbo源码解析-赵计刚 Dubbo系列 源码总结+最近感悟
- [Git] 019 merge 命令的补充
回顾:[Git] 017 加一条分支,享双倍快乐 的 "2.3" 1. "Fast-forward" "Git" 在合并分支时会尽可能地使用 ...
- numpy库的认识以及数组的创建
numpy库 numpy是Python数值计算最重要的基础包.大多数提供科学计算的包都是用NumPy的数组作为构建基础.numpy十分高效,基于NumPy的算法要比纯Python快10到100倍(甚至 ...