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 ...
随机推荐
- OutLook会议室预定提醒
项目组采用敏捷开发管理,每两周一个迭代.写个工具做会议室预定. 代码下载:https://download.csdn.net/download/linmilove/10547579 Appointme ...
- Cocos2d-X网络编程(4) Cocos2d中的网络通信协议——Socket通信
Socket,俗称网络套接字,本身并不是协议,而是一个调用接口,是对TCP/IP协议的封装和应用,.提供了一系列方法方便开发者进行网络通讯. TCP/IP协议是使用最早的通讯协议,它是传输层协议,主要 ...
- Hello World!----html
最近要做一个小网站,今晚想起来还是先看看前端终于抑制住惰性,开始看了. 看了一下html,写了个hello world.老实讲,我竟然还有些小激动 <html> <hea ...
- Linux 系统多台主机之间做SSH免密码登陆
SSH 免密登录 环境说明 CentOS 7.3 关键点 免密登录的关键点在于理解谁登录谁. A 生成的公钥给 B,也给 C.D,则 A 可以直接免密 SSH 登录 B.C.D A 生成密钥 在 A ...
- mac下安装php zookeeper扩展
安装步骤 php-zookeeper依赖libzookeeper,所以需要先安装libzookeeper 安装libzookeeper cd /usr/local/src/ wget http://m ...
- tcp和udp详解？？
TCP:面向连接的可靠传输 tcp规定了:传输服务必须建立连接 传输结束必须断开连接 传输数据必须保证可靠 数据的可靠性:无重复.无丢失.无失序.无差错. 建立连接(三次握手): ...
- sping data jpa 共享主键 OneTonOne 延时加载
当我们使用spring boot创建项目时,系统默认使用的是如下parent. <parent> <groupId>org.springframework.boot</g ...
- Git 使用疑问
1) fatal: remote origin already exists. 解决办法 ..$ git remote add origin git@git.*.com:tang/comment_s ...
- Python webdriver调用Chrome报错
报错信息如下: selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to b ...
- pycharm链接数据库以及连接时候出现错误的集合
1.pycharm如何直接连接数据库? 作用:这是一种管理数据库的方式而已,因为在开发过程中结合使用还是不错的!当然,还有有很多管理数据库的工具和方法. 比如:navicat工具 1.1 如何找到管 ...