今天做了好多小东西，还挺开心的~

<!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...的更多相关文章

  1. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  2. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  3. css3动画特效：纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  4. flutter 入口文件配置路由+加载页面

    入口文件配置路由 1.路由信息 -- 加载页面 ,通常用于显示新的内容或者广告,加载完成之后进入主页面 -- 主页面 /app 2.配置页面  main.dart main.dart // main ...

  5. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  6. 加载页面（Loading）

    /* 文件说明:页面加载时Loading JS 文件描述:解决IE或FF下,初始化加载时,页面布局乱掉的问题,参考:*/var width = $(window).width();var height ...

  7. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  8. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

随机推荐

  1. Vue中的model

    v-model语法糖: model: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event, 但是一些输入类型比如单选框和复选框按钮可能想使用 ...

  2. delphi将程序最小化至右下角

    程序新手,如果有不恰当的地方,请大家帮忙改正! 1.下载并安装Raize.v5.5控件,delphi版本为:delphi 7.0. 2.添加RzTrayIcon控件.PopupMenu控件至窗体上. ...

  3. java 发送 http post 和 get 请求(利用unirest)

    调用服务器端的接口在前端调用,但是我们也会经常遇到在服务器后端调用接口的情况,网上的例子大部分都是用 jdk 原生的 URL realUrl = new URL(url); URLConnection ...

  4. ES（ElasticSearch） 索引创建

    个人分类: ElasticSearchindex   环境:ES 6.2.2 os:Centos  7 kibana:6.2.2 1.创建新的索引(index) PUT indexTest001 结果 ...

  5. 机器学习【一】K最近邻算法

    K最近邻算法 KNN 基本原理 离哪个类近,就属于该类   [例如:与下方新元素距离最近的三个点中,2个深色,所以新元素分类为深色] K的含义就是最近邻的个数.在sklearn中,KNN的K值是通过n ...

  6. 【ABAP系列】SAP ABAP系统变量及注释

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP系统变量及注释 ...

  7. [转帖]华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz

    华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz https://www.cnbeta.com/articles/tech/850561.htm 中电科旗下的普华软件 支持国 ...

  8. CentOS下搭建docker+.net core

    运行环境: CentOS 7.0 容器:Docker 1.13.1 .Net Core版本: .NET Core 2.1,安装详见 CentOS 7 下安装.NET Core SDK 2.1 1.安装 ...

  9. IntelliJ IDLE

    目录 IntelliJ IDLE java项目结构 代码生成 psvm sout 快捷键 更改代码提示快捷键 代码相关快捷键 窗口相关快捷键 Debug快捷键 主题导入 下载主题 导入主题 应用主题 ...

  10. 最长公共子序列(LCS) Medium1

    In a few months the European Currency Union will become a reality. However, to join the club, the Ma ...