&title&图片预加载&/title&
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState==&complete&||img.readyState==&loaded&){
callback(img,imgid);
}else if(Browser.Moz){
img.onload=function(){
plete==true){
callback(img,imgid);
//如果因为网络或图片的原因发生异常，则显示该图片
img.onerror=function(){img.src='/img/baidu_logo.gif'}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.
//初始化需要显示的图片，并且指定显示的位置
window.onload=function(){
Imagess(&/lovebyakuya/pic/item/01cff063d98653.jpg&,&img1&,checkimg);
Imagess(&/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg&,&img2&,checkimg);
Imagess(&/joanne728/pic/item/d20eaa184c71.jpg&,&img3&,checkimg);
Imagess(&/-/res/Camilla/_h.jpg&,&img4&,checkimg);
Imagess(&/-/res/Camilla/16d078845_h.&,&img5&,checkimg);
&img id=&img1& src=&loading.gif& width=&100& height=&100& /&
&img id=&img2& src=&loading.gif& width=&100& height=&100& /&
&img id=&img3& src=&loading.gif& width=&100& height=&100& /&
&img id=&img4& src=&loading.gif& width=&100& height=&100& /&
&img id=&img5& src=&loading.gif& width=&100& height=&100& /&
网页中有时候需要获得图片的宽度和高度，来定义某些大小，可是这个是需要从服务端请求图片，下载到本地才能够得到的，有些js或者jquery代码在还没有加载完图片时就执行了。怎么办呢？
jquery提供一个方法：
01.$(&&).load(function(){...});
其中选择器是图片的id或class，function里面的方法就是回调函数，在图
本文实例讲述了jQuery实现预加载图片的方法。分享给大家供大家参考。具体分析如下： 这段js代码用于预加载图片，记住是预加载，不是后加载哟，就是在图片还不显示的时候就将图片下载到用户浏览器的缓存中，这样要显示的时候就非常快，无需再到服务器上去读取图片。
jQuery.preloadImages = function() { 　　for(var i = 0; i & arguments.
有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法，并通过代码与实际应用相结合进行解释与说明。 onload方法 通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显
在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？ 我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 ―― IE6、IE7 我们可以使用 js.onreadystatec
android如何在加载图片的时候再ImageView里边给一个加载中的提示
本帖最后由 u 于
11:16:17 编辑
如图。类似这种效果。图片未加载完的时候显示类似这个图的效果，图片加载完事儿了，再直接显示图片。
------解决思路---------------------- AlertDialog你可以百度下这个。
js图片预加载简单示例
function loadImage(url, callback) { if(url!='null') { var img = new Image(); &nbsp
用document.onreadystatechange的方法来监听状态改变， 然后用document.readyState == “complete”判断是否加载完成
代码如下：
document.onreadystatechange = subS//当页面加载状态改变的时候执行这个方法. function subSomething() { if(doc
现在网上有很多网页加载进度条 ，但大多都是时间固定的。 下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。
&html& &script language=VBScript& Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad()
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。
一、load事件
&!DOCTYPE HTML& &html& &head& &meta charset=&utf-8&& &title&img - load event&/title& &
网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片。 知道了一张图片的地址，需要把它在一个固定大小的html容器（可以是div等）里边显示出来，最重要的当然是需
方法回调:callback方法回调是指当某方法执行完成后,去自动执行指定的另一方法的过程.下面举两个代表性的例子,说说JS世界里的方法回调. 一 对JS脚本文件动态加载,当加载完成后,去回调一个函数
&script& /* js动态加载脚本库方法 */ function include_js(file) { var _doc = document.getEleme
1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果
&div style=&height: 2500& id=&txtScrollTop&& &/div& &div id=&galleryLi
创建一个Image对象，实现图片的预下载，如果图片已经存在于浏览器缓存，直接调用回调函数，使用onload事件可以判断图片是否加载完成
function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = plete) { // 如果图片已经存在于浏览
做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况，下面就这个问题我们一种如何使用js处理这个问题的方法，具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理，js处理图片主要是利用js中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。
（1）第一中方法，通过onload事件，比如：
在使用jQuery Mobile进行Web开发中，当页面跳转时（pageA =& pageB），在pageB中引用的JS并未成功运行。因为，JQM并为将整个页面加载到当前的dom中，仅将data-role=&page&元素加入当前的dom中。
因此，在&head&中引入的外部JS文件，以及&page&标签外的JS均不能正常运行，刷新页面后方可加载
Asynctask异步加载多个视频缩略图 未加载完毕时点击某播放视频出错！这是什么原因？
本帖最后由 kg_second 于
16:54:33 编辑
asynctask在Aactivity异步加载视频缩略图，但是还未加载完毕就点击其中一个视频在Bactivity中播放，这可以实现么？
（我实现的只有在全部加载完毕再打开视频播放才正常T_T），
图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。图片延迟加载
iPhone table 实现动态加载图片的教程
iPhone table 实现动态加载图片的教程iPhone在加载列表时，如果每个等待把所有列表中的数据都加载完在显示相关内容，如果列表中有一些比较大的图片，加载的时间比较长，那么给用户的效果就很差了，下面详细是一种实现动态加载图片的办法：
- (UITableViewCell *)tableView:(UITableView *)tableV
大概的实现方式是： 在页面的load没有触发之前，把所有的指定id的元素内的img放入到imgs中，将所有的图片的src值放入到一个新建的_src属性中，把src设置为指定的显示图片。 然后，在document.body的scroll事件触发时，循环计算imgs中的img元素位置是否正好在浏览器显示框范围内，如果是，则将img元素的_src属性的值赋给src，这样图片就能显示出来。 这里比较麻烦地
[转]flash中利用Loader.loadBytes方法和URLStream类实现图片的逐步加载
http://blog.csdn.net/shangmw/archive//5858982.aspx
在Flash中，有Loader类，可以从外部载入一张图片（或swf文件）。但是有个不好的地方就是，不像浏览器那样一边下载一边显示。 所幸的是，Flash提供了Loader.l
实现原理 把所有需要延时加载的图片改成如下的格式：
&img lazy_src=&图片路径& border=&0&/&
然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用laz
看个例子：
&input type=&button& name=&& value=&载入图片& onclick=&addImg('tt.jpg')& /& &script type=&text/javascript&& &!-- function
程序里的图片加载问题 我想问一下程序里有各种各样的图片，按钮图片背景，还有一些装饰图片，这些图片时后来加载在控件上的，还是开始就直接加载图片在上面做热点？有没有什么相关例子
------解决方案--------------------
每一条路都能走通、都可以实现 自己先试试
------解决方案--------------------
　　Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片，让图片出现在（或接近)）视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。
源码下载 　
本文链接：Lazyr.js – 延迟加载图片（Lazy Loading） 编译来源：梦想天空
oLoader使用方法 不管是oLoader还是oPageLoader都是基于jQuery，所以调用前请先加载jquery库，作者已经将两个插件集成到一起：jquery.oLoader.min.js，已经打包好请戳源码下载。 调用jQuery oLoader非常简单，一句话如下：
$('#element').oLoader();
使用oLoader加载图片：
/* **************图片预加载插件****************** ///作者：没剑() ///
///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载，而图片后加载的方式， 解决了平时使用时要在图片显示出来后才能进行
&BR&/****************滚动加载图片函数****************/
function scrollLoading(){
var st = $(window).scrollTop(), sth = s
本文实例讲述了JavaScript实现当网页加载完成后执行指定函数的方法。分享给大家供大家参考。具体分析如下： 下面的JS代码演示了如何在网页加载完成时调用指定的函数，并且可以通过第二段代码动态添加多个函数同时执行。 我们只需要给window.onload指定一个函数既可以在页面加载完成时自动执行MyCoolInitFunc函数
&script type=&text/java
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/
&!DOCTYPE html& &html& &head& &meta http
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。
预览图片的js代码：
&script type=&text/javascript&& function setI
本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法。分享给大家供大家参考。具体分析如下： 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数。
function when_images_loaded($img_container, callback) {
/* do callback when images in $img_container
这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址：http://www.appelsiini.net/download/jquery.lazyload.js一、快速使用篇 1.导入JS插件
&script src=&js\jquery.js& type=&text/javascr
javascript 当页面dom模型加载完成后才执行javascript
不能使用&body onload=&&&加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML
　　imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度，还可以绑定自定义事件。可以结合 jQuery、RequireJS 使用。
使用示例：
// element imagesLoaded( document.quer
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以，求方法？
一、load事件
&!DOCTYPE HTML& &html& &head& &meta charset=&utf-8&& &title&img - load event&/title& &/head& &
虽然本效果与马赛克有些差别，但可从思路上为你提供一份参考。
&html& &head& &title&图片逐渐出现杂色效果&/title& &META content=&text/ charset=gb2312& http-equiv=Content-Type& &SCRIPT FOR=window
什么是ImageLazyLoad技术 在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ，插件名: jquery.lazyl
我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包，但是还是出现了英文。使得我们不得埋怨这框架咋这么不好用，其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数。假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的
通过使用jquery的lazy loader插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
　　使用lazy loader插件很简单，只要在页面中引入lazy loader插件，然后为页面上的图片调用延迟加载方法就可以了。lazy loader插件的下载地址：http://www.
Android 中WebView加载本地css和js Android中WebView中加载本地css和js网上找资料说这样写
后台这样写
privateWebV
protectedvoidonCreate(BundlesavedInstanceState也许你还喜欢键盘快捷键:等待时动画效果的实现_iOS开发_
等待时动画效果的实现
来源：人气：364
当我们在请求网络时加载页面时有个动作效果，效果如下：
源代码可以网上找开源项目Coding.net，上面的效果原理为两张图片组合，外面那个则为动画转动，里面的图标则是透明度的变化；主要代码如下：
1：把它封装在EaseLoadingView里面
@interface EaseLoadingView : UIView
@operty (strong, nonatomic) UIImageView *loopView, *monkeyV
@property (assign, nonatomic, readonly) BOOL isL
- (void)startA
- (void)stopA
@interface EaseLoadingView ()
@property (nonatomic, assign) CGFloat loopAngle, monkeyAlpha, angleStep, alphaS
@implementation EaseLoadingView
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
_loopView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading_loop"]];
_monkeyView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading_monkey"]];
[_loopView setCenter:self.center];
[_monkeyView setCenter:self.center];
[self addSubview:_loopView];
[self addSubview:_monkeyView];
[_loopView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
[_monkeyView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
_loopAngle = 0.0;
_monkeyAlpha = 1.0;
_angleStep = 360/3;
_alphaStep = 1.0/3.0;
- (void)startAnimating{
self.hidden = NO;
if (_isLoading) {
_isLoading = YES;
[self loadingAnimation];
- (void)stopAnimating{
self.hidden = YES;
_isLoading = NO;
- (void)loadingAnimation{
static CGFloat duration = 0.25f;
_loopAngle += _angleS
if (_monkeyAlpha &= 1.0 || _monkeyAlpha &= 0.0) {
_alphaStep = -_alphaS
_monkeyAlpha += _alphaS
[UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
CGAffineTransform loopAngleTransform = CGAffineTransformMakeRotation(_loopAngle * (M_PI / 180.0f));
_loopView.transform = loopAngleT
_monkeyView.alpha = _monkeyA
} completion:^(BOOL finished) {
if (_isLoading && [self superview] != nil) {
[self loadingAnimation];
[self removeFromSuperview];
_loopAngle = 0.0;
_monkeyAlpha = 1,0;
_alphaStep = ABS(_alphaStep);
CGAffineTransform loopAngleTransform = CGAffineTransformMakeRotation(_loopAngle * (M_PI / 180.0f));
_loopView.transform = loopAngleT
_monkeyView.alpha = _monkeyA
注意loadingAnimation这里面有动作的处理及透明度的处理，当停止加载后把它自个从当前的视图去除；
2：UIView (Common)在UIView扩展类里
#pragma mark LoadingView
@property (strong, nonatomic) EaseLoadingView *loadingV
- (void)beginL
- (void)endL
- (void)setLoadingView:(EaseLoadingView *)loadingView{
[self willChangeValueForKey:@"LoadingViewKey"];
objc_setAssociatedObject(self, &LoadingViewKey,
loadingView,
OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self didChangeValueForKey:@"LoadingViewKey"];
- (EaseLoadingView *)loadingView{
return objc_getAssociatedObject(self, &LoadingViewKey);
- (void)beginLoading{
for (UIView *aView in [self.blankPageContainer subviews]) {
if ([aView isKindOfClass:[EaseBlankPageView class]] && !aView.hidden) {
if (!self.loadingView) { //初始化LoadingView
self.loadingView = [[EaseLoadingView alloc] initWithFrame:self.bounds];
[self addSubview:self.loadingView];
[self.loadingView mas_makeConstraints:^(MASConstraintMaker *make) {
make.self.edges.equalTo(self);
[self.loadingView startAnimating];
- (void)endLoading{
if (self.loadingView) {
[self.loadingView stopAnimating];
注意：cocoa的KVO模型中，有两种通知观察者的方式，自动通知和手动通知。顾名思义，自动通知由cocoa在属性值变化时自动通知观察者，而手动通知需要在值变化时调用 willChangeValueForKey:和didChangeValueForKey: 方法通知调用者。
3：使用页面调用
- (void)sendRequest{
[self.view beginLoading];
__weak typeof(self) weakSelf =
[[Coding_NetAPIManager sharedManager] request_CodeFile:_myCodeFile withPro:_myProject andBlock:^(id data, NSError *error) {
[weakSelf.view endLoading];
if (data) {
weakSelf.myCodeFile =
[weakSelf refreshCodeViewData];
[weakSelf.view configBlankPage:EaseBlankPageTypeView hasData:(data != nil) hasError:(error != nil) reloadButtonBlock:^(id sender) {
[weakSelf sendRequest];
其中[self.view beginLoading]跟[weakSelf.view endLoading]就可以调用动画效果；
补充：另一种是有很多不同的图片组成的动画效果，可以用每一张图片然后FOR遍历组成出动作效果；
//设置普通状态的动画图片
NSMutableArray *idleImages = [NSMutableArray array];
for (NSUInteger i = 1; i&=60; ++i) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd",i]];
[idleImages addObject:image];
[idleImages addObject:image];
优质网站模板The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.用CSS制作Loading加载动画【第一期】
用CSS制作Loading加载动画【第一期】
随着我们对CSS3的熟悉，使用CSS制作Loading加载动画的童鞋越来越多。看到CSS3越来越火爆，小编也按捺不住了！准备把一些华丽的加载动画与大家一起分享。这次，小编汇集了8个简洁清爽的基础Loading加载动画。在今后的日子里，小编将会发布更多不同类型的Loading加载动画供大家参考。如果你喜欢以下的内容，请您持续关注《用CSS制作Loading加载动画》系列。
经典加载条
&div class="bar"&&/div&
width: 100%;
height: 20
border: 1px solid #2980b9;
border-radius: 3
background-image:
repeating-linear-gradient(
#eee 10px,
#eee 20px /* determines size */
background-size: 28px 28
animation: move .5
@keyframes move {
background-position: 0 0;
background-position: 28px 0;
&div class="spinner"&&/div&
.spinner {
height: 60
margin: 60
animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-
@keyframes rotate {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
@keyframes background {
background-color: #27ae60;
background-color: #9b59b6;
background-color: #c0392b;
彩虹空心圆
&svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"&
&circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"&&/circle&
html, body { height: 100%; }
align-items:
justify-content:
$offset: 187;
$duration: 1.4s;
.spinner {
animation: rotator $dura
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
stroke-dasharray: $
stroke-dashoffset: 0;
transform-origin:
animation:
dash $duration ease-in-out infinite,
colors ($duration*4) ease-in-
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
@keyframes dash {
0% { stroke-dashoffset: $ }
stroke-dashoffset: $offset/4;
transform:rotate(135deg);
stroke-dashoffset: $
transform:rotate(450deg);
空心圆渐变
&div class="signal"&&/div&
border: 5px solid #333;
border-radius: 30
height: 30
left: 50%;
margin: -15px 0 0 -15
opacity: 0;
animation: pulsate 1s ease-
animation-iteration-count:
@keyframes pulsate {
transform: scale(.1);
opacity: 0.0;
opacity: 1;
transform: scale(1.2);
opacity: 0;
复古风格加载条
&div id="wrapper"&
&div id="border"&
&div id="whitespace"&
&div id="line"&
html, body {
margin: 0;
height: 100%;
#wrapper {
width: 200
height: 20
left: 50%;
border: 3px solid #222;
height: 100%;
width: 100%;
left: -50%;
top: -50%;
padding: 4px 3
#whitespace {
height: 100%;
width: 100%;
height: 100%;
width: 100%;
background-color:
-webkit-animation: slide 5s steps(40)
-moz-animation: slide 5s steps(40)
animation: slide 5s steps(40)
@keyframes slide {
left: -100%;
left: 100%;
@-moz-keyframes slide {
left: -100%; }
left: 100%;
@-webkit-keyframes slide {
left: -100%;}
left: 100%;
&div class="loading"&
&div class="loading-bar"&&/div&
&div class="loading-bar"&&/div&
&div class="loading-bar"&&/div&
&div class="loading-bar"&&/div&
.loading {
left: 50%;}
.loading-bar {
display: inline-
height: 18
border-radius: 4
animation: loading 1s ease-in-}
.loading-bar:nth-child(1) {
background-color: #3498
animation-delay: 0;}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;}
@keyframes loading {
transform: scale(1); }
transform: scale(1, 2.2);
transform: scale(1);}
三维加载标
&div class="container"&
&div class="loader"&
&div class="dot dot1"&&/div&
&div class="dot dot2"&&/div&
&div class="dot dot3"&&/div&
&div class="dot dot4"&&/div&
&div class="dot dot5"&&/div&
&div class="dot dot6"&&/div&
&div class="dot dot7"&&/div&
&div class="dot dot8"&&/div&
@import "compass/css3";
.container{
transform-style:preserve-3d;
transform:rotateX(-45deg);
width: 100
height:100
margin: 100
transform-style:preserve-3d;
animation-duration: 5s;
animation-timing-function:
animation-iteration-count:
animation-name:
border-radius:100
background:rgba(0,0,0,.025);
height: 20
border-radius: 20
background: #333;
animation-duration: 1s;
animation-iteration-count:
animation-timing-function: ease-in-
opacity:.1;
@for $i from 1 through 8 {
.dot#{$i} { transform:rotate($i*45deg) translate3d(0px,-40px,20px) rotateX(-35deg);}
.dot#{$i} {
animation-name: animation-delay:$i*.125s;};
@keyframes rotate {
from{ transform: rotateY(0deg) rotateX(90deg); }
to { transform: rotateY(-360deg)
rotateX(90deg);}
@keyframes flash {
from { opacity:.8 }
to { opacity:.1}
&div class="spinner"&&/div&
.spinner {
box-sizing: border-
height: 60
margin: 80
border: 0px solid #27ae60;
border-radius: 50%;
box-shadow: 0 -20px 0 24px #27ae60
animation: rotate 1
@keyframes rotate {
transform: rotate(0deg);
transform: rotate(360deg);
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2