html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载

我在执行繁重的

JavaScript操作时遇到了显示加载CSS动画的问题,因此想知道CSS动画是否比显示简单的加载GIF图像需要更多资源,我进行了以下测试.

1个已创建的页面,加载CSS

>创建加载CSS动画的页面

>创建了加载GIF图像的页面

>使用Chrome任务管理器比较他们的资源

结果如下：

看起来CSS动画使用的CPU更多,内存更多

所以基本上我想咨询一下使用CSS动画.这不是太重了吗？我应该避免在装载箱子中使用它吗？

这是用于加载CSS动画的代码

CSS

/* Beautiful loading screen */

#loadingWrap{

width: 100%;

height: 100%;

top: 0px;

z-index: 250;

background-color: rgba(255, 255, 255, 0.46);

}

.glyphicon.spin {

font-size: 36px;

-webkit-animation: spin 1.822s infinite linear;

-moz-animation: spin 1.822s infinite linear;

-o-animation: spin 1.822s infinite linear;

animation: spin 1.822s infinite linear;

-webkit-transform-origin: 50% 58%;

transform-origin:50% 58%;

-ms-transform-origin:50% 58%; /* IE 9 */

line-height: 0px;

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

@keyframes spin {

from { transform: rotate(0deg); }

to {transform: rotate(360deg); }

}

#loadingIcon {

z-index: 10;

position: absolute;

right: 20px;

bottom: 20px;

line-height: 0px;

}

HTML

这是使用简单GIF图像加载的代码

CSS

#loadingWrap{

width: 100%;

height: 100%;

top: 0px;

z-index: 250;

background-color: rgba(255, 255, 255, 0.46);

}

#loadingIcon {

z-index: 10;

position: absolute;

right: 20px;

bottom: 20px;

line-height: 0px;

background: url(../1-0.gif) no-repeat center center;

width: 20px;

height: 20px;

}

HTML

html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载相关推荐

Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
【Android笔记25】Android中的动画效果之逐帧动画
这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<
js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
css加载更多动画效果,css3实现loading动画效果
通过css3动画实现三种loading加载动画效果1:通过css3的border-radius与transform的rotate()实现效果2:通过css3动画animation的animatio ...
html中如何设置动画效果,css3如何设置动画？
首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes"规则". animation属性和@keyframes"规则" ...
抽奖动画效果html,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...

html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载

html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载相关推荐

最新文章

热门文章