一个小动画，颠覆你的CSS世界观
<!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世界观的更多相关文章
- iOS 一个小动画效果-b
近期工作不忙,来一个需求感觉棒棒的,是一个比较简单的页面,如下图(图1) 图1 应该很简单吧,没什么大的功能,就是一个展示,一个拨打电话,拨打电话不需要说,几行代码搞定,基本UI也不用说了,刚培训完的 ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- 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 ...
- 纯 css 打造一个小提示 tooltip
最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...
- js动画--一个小bug处理下
对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的.为了我们能够很好的对某个属性进行操作的话.我们这样来设置. js文件 win ...
- CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...
- 如何制作网页小动画？——gif or png
一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...
- 利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...
- 前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画
逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画,指导用户去下载客户端,于是摸索实现了一个. 原动画效果 可以看到,一个静止的小电视人,当鼠标移动到电视人身上时,电视人慢慢变身成为一个小 ...
随机推荐
- CNN细节
1.各层作用 输入层 输入层是整个神经网络的输入,一般代表的是图片的像素矩阵(一般为三维矩阵,即像素x像素x通道) 卷积层 每一层卷积都会提取数据特征,再经过组合和抽象形成更高阶的特征. 池化层 保留 ...
- SQLSERVER中的人民币数字转大写的函数实现
CREATE FUNCTION [dbo].[f_num_chn] (@num numeric(14,5))RETURNS varchar(100) WITH ENCRYPTIONASBEGIN-- ...
- C语言：打印A-Z字母组合的菱形图案
题目: +++++++++A+++++++++++++++++BCD+++++++++++++++EFGHI+++++++++++++JKLMNOP+++++++++++QRSTUVWXY++++++ ...
- 【51nod】1822 序列求和 V5
题解 我是zz吧 nonprime[i * prime[j]] = 0 = = 还以为是要卡常,卡了半天就是过不掉 我们来说这道题-- 首先,我们考虑一个\(K^2\)做法 \(f_{k}(N) = ...
- linux服务开机启动
1.chkconfig 配置开机启动 在 /etc/init.d 创建执行服务的可执行脚本,赋予脚本可执行权限.如果是通过yum 或者rpm安装的,并且已经在该目录下存在对应的启动脚本,就不用自己 ...
- sqoop遇到的问题
我使用的是CDH版本的 这是我的sqoop脚本 sudo -u hive sqoop import --connect jdbc:mysql://xxxx/rom3 --username xxx -- ...
- Python 爬虫个人记录（一）豆瓣电影250
一.爬虫环境 Python3.6 scrapy1.4 火狐浏览器 qq浏览器 二.scrapy shell 测试并获取 xpath 1.进入scrapy shell 2 .获取html fetch(' ...
- python脚本获取本机公网ip
1.获取公网IP地址方式,访问:http://txt.go.sohu.com/ip/soip 2.python脚本实现: #!/usr/bin/python # -*- coding:utf8 -*- ...
- Anaconda 安装好了，却无法运行？
使用管理员运行:conda prompt 或者 Windows PowerShell 执行命令 conda update anaconda-navigator 还是不行就试试命令: anaconda- ...
- Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) E. National Property（2-sat）
E. National Property time limit per test 1 second memory limit per test 512 megabytes input standard ...