<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			* {

				padding: 0px;

				margin: 0px;

			}

			.loadBlock {

				width: 104px;

				height: 84px;

				position: fixed;

				top: 43%;

				left: 50%;

				margin-left: -52px;

				text-align: center;

				z-index: 999;

				color: green;

				overflow: hidden;

				background:#6959CD;

				border-radius:5px ;

			}

			.loadBg {

				background: url(img/loadCartoon.png) 0 -80px no-repeat;

				width: 90px;

				height: 50px;

				margin: 11px auto 0;

				background-size: cover;

				animation: loadBg 1s infinite linear;

				-webkit-animation: loadBg 1s infinite linear;

				position: relative;

				z-index: 2;

			}

			@keyframes loadBg {

				0% {

					left: -5.2rem;

				}

				99.99% {

					left: 5.2rem;

				}

				100% {

					left: -5.2rem;

				}

			}

			.loadCartoon {

				position: absolute;

				top: 0;

				left: 0.6rem;

				animation: loadCartoon 1s linear infinite alternate;

				-webkit-animation: loadCartoon 1s linear infinite alternate;

				z-index: 6;

			}

			@keyframes loadCartoon {

				0% {

					top: 0.4rem;

				}

				50% {

					top: 0rem;

				}

				100% {

					top: 0.4rem;

				}

			}

			.loadHead {

				background: url(img/loadCartoon.png) no-repeat;

				width: 90px;

				height: 34px;

				position: absolute;

				left: 19px;

				top: 4px;

				z-index: 9;

				background-size: cover;

			}

			.loadBody {

				background: url(img/loadCartoon.png) 0 -34px no-repeat;

				width: 90px;

				height: 15px;

				position: absolute;

				left: 19px;

				top: 32.4px;

				z-index: 7;

				background-size: cover;

			}

			.loadDun {

				background: url(img/loadCartoon.png) 0 -49px no-repeat;

				width: 90px;

				height: 18px;

				position: absolute;

				left: 36.4px;

				top: 34px;

				z-index: 10;

				background-size: cover;

			}

			.loadCappa {

				background: url(img/loadCartoon.png) 0 -67px no-repeat;

				width: 90px;

				height: 11px;

				position: absolute;

				left: 46px;

				top: 28px;

				z-index: 8;

				background-size: cover;

				animation: loadCappa 1s ease-in-out 0s infinite;

				-webkit-animation: loadCappa 1s ease-in-out 0s infinite;

				transform-origin: 0px 5px 20px;

				-webkit-transform-origin: 0px 5px 20px;

			}

			@keyframes loadCappa {

				0% {

					transform: rotate(0deg);

					-webkit-transform: rotate(0deg);

				}

				50% {

					transform: rotate(18deg);

					-webkit-transform: rotate(18deg);

				}

				100% {

					transform: rotate(0deg);

					-webkit-transform: rotate(0deg);

				}

			}

			.loadCon {

				color: #fff;

				font-size: 12px;

				text-align: center;

				line-height: 18px;

				letter-spacing: 2px;

				position: relative;

				z-index: 4;

			}

			.backcolor {

				position: absolute;

				top: 0;

				left: 0;

				width: 100%;

				height: 100%;

				/*background: black;*/

				opacity: 0.5;

				border-radius: 5%;

				-webkit-border-radius: 5%;

			}

		</style>

	</head>

	<body>

		<div class="loadBlock">

			<div class="loadBg"></div>

			<div class="loadCartoon">

				<div class="loadHead"></div>

				<div class="loadBody"></div>

				<div class="loadDun"></div>

				<div class="loadCappa"></div>

			</div>

			<p class="loadCon">加载中...</p>

			<div class="backcolor"></div>

		</div>

	</body>

</html>

　　

一个小动画，颠覆你的CSS世界观的更多相关文章

  1. iOS 一个小动画效果-b

    近期工作不忙,来一个需求感觉棒棒的,是一个比较简单的页面,如下图(图1) 图1 应该很简单吧,没什么大的功能,就是一个展示,一个拨打电话,拨打电话不需要说,几行代码搞定,基本UI也不用说了,刚培训完的 ...

  2. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  3. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  4. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

  5. js动画--一个小bug处理下

    对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的.为了我们能够很好的对某个属性进行操作的话.我们这样来设置. js文件 win ...

  6. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  7. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  8. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  9. 前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

    逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画,指导用户去下载客户端,于是摸索实现了一个. 原动画效果 可以看到,一个静止的小电视人,当鼠标移动到电视人身上时,电视人慢慢变身成为一个小 ...

随机推荐

  1. 洛谷P1038神经网络

    传送门啦 一个拓扑排序的题,感觉题目好难懂... #include <iostream> #include <cstdio> #include <cstring> ...

  2. POJ 1236 Network of Schools（tarjan求强连通分量+思维）

    题目链接:http://poj.org/problem?id=1236 题目大意: 给你一个网络(有向图),有两个任务: ①求出至少同时需要几份副本可以使得整个网络都获得副本 ②至少添加多少信息表(有 ...

  3. poj 3270(置换群+贪心)

    Cow Sorting Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6993   Accepted: 2754 Descr ...

  4. Effective STL 学习笔记 32 ~ 33

    Effective STL 学习笔记 32 ~ 33 */--> div.org-src-container { font-size: 85%; font-family: monospace; ...

  5. OSI & TCP/IP 参考模型

    OSI参考模型的结构 OSI划分七层结构的基本原则 网中各结点都具有相同的层次: 不同结点的同等层具有相同的功能: 同一结点内相邻层之间通过接口通信: 每一层可以使用下层提供的服务,并向其上层提供服务 ...

  6. Spring介绍及配置(XML文件配置和注解配置)

    本节内容: Spring介绍 Spring搭建 Spring概念 Spring配置讲解 使用注解配置Spring 一.Spring介绍 1. 什么是Spring Spring是一个开源框架,Sprin ...

  7. jquery全面判断是否IE6浏览器

    今天在写一个登录回车提交表单的操作时,出现keydown在IE6下不能提交的兼容问题,随之无奈,找到可以使用keyup或者keypress事件时间来兼容所有浏览器,但是呢体验效果很不友好,所以只能委屈 ...

  8. hdoj2191 珍惜现在，感恩生活（01背包 || 多重背包）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2191 思路 由于每种大米可能不止一袋,所以是多重背包问题,可以直接使用解决多重背包问题的方法,也可以将 ...

  9. 二、django rest_framework源码之认证流程剖析

    1 绪言 上一篇中讲了django rest_framework总体流程,整个流程中最关键的一步就是执行dispatch方法.在dispatch方法中,在调用了一个initial方法,所有的认证.权限 ...

  10. JAVAEE——宜立方商城08：Zookeeper+SolrCloud集群搭建、搜索功能切换到集群版、Activemq消息队列搭建与使用

    1. 学习计划 1.solr集群搭建 2.使用solrj管理solr集群 3.把搜索功能切换到集群版 4.添加商品同步索引库. a) Activemq b) 发送消息 c) 接收消息 2. 什么是So ...