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 ...
随机推荐
- python学习笔记：（一）基础语法
一.编码 默认情况下,python3采用的是utf-8,所有字符串都是unicode字符串.如果有其他需要的时候,可以修改为其他的. 如:# _*_ coding:gb2312 _*_ 二.标识符 标 ...
- wsl 下安装docker
docker for windows本身其实是可以直接用的,但是仍然有很多不足,比如说:权限问题.没有docker.sock文件.文件编码问题等.而win10自带的wsl可以非常完美地解决这些问题. ...
- babel版本问题
在运行webpack命令的时候总是报错,原来是因为babel版本的问题 我安装的webpack3 babel版本是6 babel-loader是8 后来把babel改成7就可以了
- spring-第N篇整合SSM，即Mybatis+Spring+Spring MVC
1.Mybatis的配置使用 1>Jar包:mybatis-3.4.5.jar.mysql-connector-6.0.2或者ojdbc6-11.2.0.4.jar. 2>编写conf.x ...
- [LeetCode] 126. 单词接龙 II
题目链接 : https://leetcode-cn.com/problems/word-ladder-ii/ 题目描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordL ...
- 数学: HDU Co-prime
Co-prime Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Subm ...
- osi七层模型？？
1.应用层:提供用户服务,例如处理应用程序,文件传输,数据管理 (HTTP.RTSP.FTP) 2.表示层:做数据的转换和压缩,加解密等 3.会话层:决定了进程间的连接建立,选择使用什么样的 ...
- 【NOI2007】项链工厂 ——老题新做.jpg
第一次是用 ODT 过的...(虽说跑得飞慢但它就是能过) 而且还写了发题解... 第二次是在考场上碰到了这道题,然后居然打了线段树,各种 bug 直接让代码爆零 但还是补好了代码重新交了一发,发现跑 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- Burp Suite详细使用教程-Intruder模块详3
Burp Suite使用详细教程连载的第三章.0×02 Intruder—内置有效负荷测试使用技巧内置有效负荷测试选择项如下图: 今天的小技巧使用的是 numbers,给大伙科普下:Numbers 数 ...