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 ...
随机推荐
- windows下 文件资源管理器 的操作
alt + d 可以直接把光标移动到地址栏 shift + f10 可以触发右键, 后面就可以用键盘操作右键中的内容了 ( 如打开vscode alt + 空格 可以弹出窗口的菜单栏 ( 控制最大化 ...
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第1节 基本概念_03maven一键构建概念
资料里面写好的Helloworld项目 pom.xml存放jar包的坐标 首先复制项目所在的目录的路径: 先进去复制的这个路径,然后又输入了d盘.这时候就进去到这个项目目录了. 这个项目就运行起来了. ...
- python+selenium下弹窗alter对象处理02
首先使用switch_to.alert()方法进行定位,然后可以使用下面的操作 text:返回alert.confirm.prompt中的文字信息: accept():接受现有警告框: dismiss ...
- linux 文件属性文件权限
权限 -rw-------. root root Mar : anaconda-ks.cfg drwxr-xr-x root root May : dir1 drwxr-xr-x root root ...
- 2019 java学习 第二周总结
新学期,新气象,新老师,不同的语言学习. 我已经荒废了大一,感觉自己在大一根本没学啥,可能是自己太贪玩了,导致自己学的不精,自己对其他的见解很少. 也有自大的原因,导致自己一直浮在水平面,有实力,有耐 ...
- 杭州集训Day4
别问我为什么没有前三天,有时间再补~ 60+60+50=170. T1 . 坐等 memset0 ( 1s 256MB )( 原题:洛谷CF1151E Number of Components ) 树 ...
- 华南理工大学“三七互娱杯” D HRY and array
https://ac.nowcoder.com/acm/contest/874/D 题目大意是给定两个数组A和B 数组的元素可以打乱重新排列 然后求∑ni=1 AiBi 的期望 我是这么理解的: 由于 ...
- mysql自动生成my.cnf文件
http://imysql.com/my-cnf-wizard.html
- linux-memcache安装及memcached memcache扩展
linux memcached安装yum -y install libevent libevent-deve yum list memcached yum -y install memcached m ...
- 实例学习——爬取豆瓣网TOP250数据
开发环境:(Windows)eclipse+pydev 网址:https://book.douban.com/top250?start=0 from lxml import etree #解析提取数据 ...