html5游戏加载动画,HTML5 战场3游戏的加载指示动画
CSS
语言：
CSSSCSS
确定
@import "http://battlelog.battlefield.com/cdnprefix/local/public/base/fonts/purista/purista.css";
@-webkit-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 1;
right: 30px;
}
70% {
opacity: 1;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-moz-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 1;
right: 30px;
}
70% {
opacity: 1;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-webkit-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes bg {
0% {
background-color: #306f99;
}
50% {
background-color: #19470f;
}
90% {
background-color: #734a10;
}
}
@-moz-keyframes bg {
0% {
background-color: #306f99;
}
50% {
background-color: #19470f;
}
90% {
background-color: #734a10;
}
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
right: -21px;
}
45% {
opacity: 1;
right: 80px;
}
50% {
opacity: 0;
right: -21px;
}
51% {
right: -21px;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
right: -21px;
}
95% {
opacity: 1;
right: 80px;
}
96% {
right: -21px;
}
100% {
opacity: 0;
right: -21px;
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
right: -21px;
}
45% {
opacity: 1;
right: 80px;
}
50% {
opacity: 0;
right: -21px;
}
51% {
right: -21px;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
right: -21px;
}
95% {
opacity: 1;
right: 80px;
}
96% {
right: -21px;
}
100% {
opacity: 0;
right: -21px;
}
}
body {
font-family: Purista, sans-serif, arial;
background: black;
color: #eaf7ff;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px;
margin-top: -40px;
}
.bg {
padding: 30px 30px 30px 0;
background: #306f99;
-moz-animation: bg 1.5s linear infinite;
-webkit-animation: bg 1.5s linear infinite;
animation: bg 1.5s linear infinite;
-moz-box-shadow: inset 0 0 45px 30px black;
-webkit-box-shadow: inset 0 0 45px 30px black;
box-shadow: inset 0 0 45px 30px black;
}
.loading {
position: relative;
text-align: right;
text-shadow: 0 0 6px #bce4ff;
height: 20px;
width: 150px;
}
.loading span {
display: block;
text-transform: uppercase;
position: absolute;
right: 30px;
height: 20px;
width: 200px;
line-height: 20px;
}
.loading span:after {
content: "";
display: block;
position: absolute;
top: -2px;
right: -21px;
height: 20px;
width: 16px;
background: #eaf7ff;
-moz-box-shadow: 0 0 15px #bce4ff;
-webkit-box-shadow: 0 0 15px #bce4ff;
box-shadow: 0 0 15px #bce4ff;
-moz-animation: blink 3.4s infinite;
-webkit-animation: blink 3.4s infinite;
animation: blink 3.4s infinite;
}
.loading span.title {
-moz-animation: title 3.4s linear infinite;
-webkit-animation: title 3.4s linear infinite;
animation: title 3.4s linear infinite;
}
.loading span.text {
-moz-animation: title 3.4s linear 1.7s infinite;
-webkit-animation: title 3.4s linear 1.7s infinite;
animation: title 3.4s linear 1.7s infinite;
opacity: 0;
}
html5游戏加载动画,HTML5 战场3游戏的加载指示动画相关推荐
- 刺激战场服务器未响应加载失败,刺激战场辅助提示驱动加载失败 怎么办 | 手游网游页游攻略大全...
发布时间:2016-06-07 恶灵附身bink2w64.dll加载失败怎么办?有恶灵附身玩家跟小编说他在玩到第7章石门保存时突然弹出了"bink2w64.dll加载失败"的错误提 ...
- html5.js百度网盘,HTML5 Canvas+js仿百度网盘扫描文件过程加载动画
HTML5 Canvas+js仿百度网盘扫描文件过程加载动画 这是一款简单的HTML5 Canvas+js仿百度网盘扫描文件过程加载动画效果,网盘文件扫描百分比加载动画特效. var w=docume ...
- html5游戏封装安卓,html5游戏移植到android并打包成apk，加广告《二》
html5游戏移植到android并打包成apk,加广告<二> 这篇则讲解开发集成,先看看工程目录结构 ? qqbrowser_sdk_v1.2.jar为X5内核sdk,下载注册开发者 B ...
- html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接 代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
- linux内核动画,8个炫酷的HTML5动画、应用和游戏
导读 随着Web技术的不断发展,呈现在我们眼前的Web页面不仅有着越来越丰富的网页元素,而且网页之间的交互也越来越炫酷了.很多开发者已经利用HTML5开发了不少HTML5动画.应用和游戏,本文也主要分 ...
- animate cc开发html5游戏,使用Create.js与Adobe Animate CC制作H5落地页动画
一.背景 在移动端,利用H5技术,可实现微杂志,微信邀请函,H5小游戏等营销互动等应用开发,本文将介绍一种Create.js与Adobe Animate CC结合来制作H5落地页的方法. 通过两者结合 ...
- 8个炫酷的HTML5动画、应用和游戏
随着Web技术的不断发展,呈现在我们眼前的Web页面不仅有着越来越丰富的网页元素,而且网页之间的交互也越来越炫酷了.很多开发者已经利用HTML5开发了不少HTML5动画.应用和游戏,本文也主要分享这些 ...
- 怎么在php中加拼图游戏,js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单 ...
- html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- 网页游戏制作html5,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
最新文章
- 杜克大学提出 AI 算法，拯救渣画质马赛克秒变高清
- Windows Phone应用程序政策性约束
- 渗透中poc、exp、payload与shellcode的区别
- 使用vant时 tab栏中出现 van-tabs怎么省略号怎么解决
- boost::generate相关的测试程序
- 《对不队》团队项目用户验收评审
- CSS padding margin border属性讲解
- Linq：使用Take和Skip实现分页
- Go、Java 和 Rust 的比较
- 【编辑器】VSCode界面美化，图标与主题插件大全
- 在Microsoft Office 2007中检测和修复应用程序
- 计算机英语词汇带音标,常用计算机英语词汇3000例(含音标)
- 接口测试流程及测试点
- 社群编码识别黑灰产攻击实践
- 线性回归，逻辑回归个人总结
- 制作自己的matlab图注颜色
- 尚硅谷谷粒商城第十二天 商品详情页及异步编排
- LaTeX论文图片排版
- 微信支付-APP支付
- MD5的介绍，算法和C、VB、Delphi实现