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 ...
随机推荐
- 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Eclipse设置保存时自动格式化代码
在使用eclipse时,经常需要使用到Ctrl+Shift+F来格式化代码,可以打开保存时格式化,会更方便. 打开方式:Window-->Preferences-->Java --> ...
- idea中@data不生效
idea中@data不生效,原因是idea中没有安装插件,记得重启
- 避免浏览器缓存JS
有时候更改了JS代码,但是浏览器内容不变,这样<script src="Scripts/myjs/Master.js?v"></script>引入JS就可以 ...
- Java第四周总结+实验报告
实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...
- 比较css中单位px，em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- SpringBoot项目快速启动停止脚本
SpringBoot项目快速启动停止脚本 1.在jar包同级目录下,创建 app.sh #!/bin/bash appName=`ls|grep .jar$` if [ -z $appName ] t ...
- Spark启动流程（Standalone）-分析
1.start-all.sh脚本,实际上执行java -cp Master 和 java -cp Worker 2.Master 启动时首先穿件一个RpcEnv对象,负责管理所有通信逻辑 3.Mast ...
- 跟风Manacher算法整理
这是上上周天机房一位神仙讲的,\(gu\)了这么久才来整理\(w\),神仙讲的基本思路已经全都忘记了,幸好的是神仙写了\(blog\),吹爆原博浅谈\(Manacher\)算法,以及原博神仙\(ych ...
- Python链表倒置的两种方法
实现链表的翻转: 思路一: def reverse(self): """ 翻转链表的第一种思路:依次改变结点的指向,将结点指向此结点的上一个结点,并使用pre来指向这个节 ...