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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>正在加载中...</title>
  6.     <style type="text/css">
  7.         .box{
  8.             width:300px;
  9.             height:125px;
  10.             border:1px solid #000;
  11.             margin:200px auto 0;
  12.         }
  13.  
  14.         .box p{
  15.             text-align: center;
  16.             width:100%;
  17.             float:left;
  18.             /*p标签默认有样式*/
  19.             margin:0;
  20.             padding:0;
  21.         }
  22.  
  23.         .box div{
  24.             width:30px;
  25.             height:70px;
  26.             margin:15px;
  27.             float: left;
  28.             background-color: hotpink;
  29.             border-radius:10px;
  30.         }
  31.  
  32.         .box div:nth-child(1){
  33.             background-color: lightcoral;
  34.             /*缩、放 这是两次，所以是2*/
  35.             /*animation:loading 0.5s ease 0s 2 alternate;*/
  36.             animation: loading 0.5s ease 0s infinite alternate;
  37.         }
  38.         .box div:nth-child(2){
  39.             background-color: darkorange;
  40.             animation: loading 0.5s ease 0.1s infinite alternate;
  41.         }
  42.         .box div:nth-child(3){
  43.             background-color: lightcoral;
  44.             animation: loading 0.5s ease 0.2s infinite alternate;
  45.         }
  46.         .box div:nth-child(4){
  47.             background-color: gold;
  48.             animation: loading 0.5s ease 0.3s infinite alternate;
  49.         }
  50.         .box div:nth-child(5){
  51.             background-color: burlywood;
  52.             animation: loading 0.5s ease 0.4s infinite alternate;
  53.         }
  54.  
  55.         @keyframes loading{
  56.             from{
  57.                 /*缩放y轴*/
  58.                 transform:scaleY(1)
  59.             }
  60.  
  61.             to{
  62.                 transform: scaleY(0.5);
  63.             }
  64.  
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="box">
  70.         <div></div>
  71.         <div></div>
  72.         <div></div>
  73.         <div></div>
  74.         <div></div>
  75.         <p>loading...</p>
  76.     </div>
  77. </body>
  78. </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. maven setting.xml文件配置详情

    1 首先,setting.xml一般存在与两个地方:maven的安装目录/conf/,和${user.home}/.m2/下.他们的区别是在maven安装目录下的setting.xml是所有用户都可以 ...

  2. Python 笔试集（3）：编译/解释？动态/静态？强/弱？Python 是一门怎样的语言

    面试题 解释/编译?动态/静态?强/弱?Python 到底是一门怎样的语言? 编译 or 解释? 编译.解释都是指将(与人类亲和的)编程语言翻译成(计算机能够理解的)机器语言(Machine code ...

  3. 数据库之SQL语句查询基础

    人的一生要疯狂一次,无论是为一个人,一段情,一段旅途,或一个梦想. 人没有梦想是荒废的,是漫无目的的,拥有梦想你会飞的更远. 下面我就来为大家介绍一下SQL语句的查询基础,以下使用MySchool数据 ...

  4. Hibernate一级缓冲

    Hibernate的一级缓冲 什么是缓冲 缓冲概念: 数据存在数据库中,数据库本身就是一个文件系统,使用流的方式操作文件,但是文件中有很多的内容,用流的操作得效率就低. 解决办法: 把数据存在内存中, ...

  5. 【Appium遇到的坑】环境配置无误，路径无中文，无空格，提示error: Logcat capture failed: spawn ENOENT

    代码如下,提示error: Logcat capture failed: spawn ENOENT from appium import webdriver from time import slee ...

  6. mysql的my.sock不存在问题

    因为是初步学习Linux,所以为了对其更加了解,没有使用yum对mysql进行安装,而是使用xftp6的方式上传然后解压安装 1.在安装过程中,好像如果不安装在usr/local目录下会存在不能启动的 ...

  7. centos 7 中如何提取IP地址

    ifconfig |grep -Eo "(([1-9)?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|1[0-9]{2}|2[0-4][0 ...

  8. Git入门资料

    1.廖雪峰老师Git教程 地址:https://www.liaoxuefeng.com/wiki/896043488029600 2.Eclipse eGit连接GitHub教程 地址:https:/ ...

  9. ubutu16.04编译安装apache

    // 安装编译器 sudo apt-get install build-essential // 下载所需依赖及apache2源码包 wget --no-check-certificate https ...

  10. 这款多线程中间件，吊打 Redis！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 今天给大家介绍的是KeyDB,KeyDB项目是从redis fork出来的分支.众所周知redis是一个单线程的kv内存存储 ...