网页中图纸旋转的两种达成方式,loading的布置与

CSS3制作Loading动画

2015/10/31 · CSS · Loading

原文出处: AlloyTeam- TAT.yana   

虽然现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加快。资深网瘾少女表示,这世上最刺眼的不是阳光,而是“正在加载”;最长的不是周杰伦的电影,而是“正在加载”;最痛心的事情不是你不爱我,而是“正在加载”(语文老师告诉我排比要至少写三句)。

 

这是为什么呢

为什么loading让我们如此痛苦呢?因为,我们看到的loading是这样的  图片 1是这样的   图片 2颜值再高一点的是这样的  图片 3

这就是为什么要叫他们“菊花”,就因为长得丑啊喂!

我们要在这个看脸的世界存活下去!!!

刚出生的时候我是个大圆脸,塌鼻梁,单眼皮,曾经一度被隔壁阿姨怀疑我是我妈捡来的==但我善良可爱的母亲大人对我不离不弃,常常跟我说“先天不足,后天弥补”,我才有了继续活下去的勇气。作为网页,如果真的没办法改变“加载慢”这个病,那么把loading的动画做的好看一点,萌用户一脸血,“愉快的时光总是转瞬即逝”。

又是一个刷朋友圈的难眠的夜晚,一篇文章吸引了我《什么样的loading动画,我会等!》。只要一点点简单的创意,加一点点简单的动效设计,加载过程就充满了乐趣。

那么我们一起来用纯纯的CSS3做几个简单有趣的loading动画吧~(效果图均为动图!效果图均为动图!效果图均为动图!)

 

首先,我们做一个最简单的进度条样的动画(这里偷懒下,只兼容webkit内核了==)

图片 4

其中,animation-timing-function的默认状态是ease(低速开始,加快,在结束前变慢),ease-in(低速开始),ease-out(低速结束),ease-in-out(低速开始低速结束),linear(匀速),还可以用cubic-bezier(0, 0, 0, 0)来设置速度。具体的速度曲线和设置速度值可以在http://cubic-bezier.com上查到。

animation-iteration-count的infinite表示无限次循环;animation-direction的normal表示动画播放完后从头开始播放,reverse和normal相反,是从后向前播放,还有alternate会逆向播放。

XHTML

<a href="; <img alt="1" class="alignnone size-medium wp-image-8625" src="" style="height:115px; width:400px" /> </a> <a href="; <img alt="12" class="alignnone size-medium wp-image-8623" src="" style="height:356px; width:400px" /> <span style="font-size:16px"> <span style="color:#000000">然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。</span> </span> </a> <a href="; <img alt="11" class="alignnone size-medium wp-image-8631" src="" style="height:162px; width:300px" /> </a>

1
2
3
4
5
6
7
8
9
10
11
12
<a href="http://www.hamupet.com/uploads/allimg/191015/160R34132-3.png">
  <img alt="1" class="alignnone size-medium wp-image-8625" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/1-300x86.png" style="height:115px; width:400px" />
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12.png">
    <img alt="12" class="alignnone size-medium wp-image-8623" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12-300x267.png" style="height:356px; width:400px" />
    <span style="font-size:16px">
     <span style="color:#000000">然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。</span>
   </span>
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111.png">
    <img alt="11" class="alignnone size-medium wp-image-8631" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111-300x162.png" style="height:162px; width:300px" />
</a>

 

效果如下

图片 5

 

卡带Loading

 

上面那个黄条是什么鬼==好丑的有没有!!!

于是我灵光一闪,卡带的样子来做loading一定不错~

我找了一个卡带的图,把其中的转轮切出来,使用rotate来使圆圈旋转。注意要使用transform-origin: 50% 50%;使动画以圆圈的圆心旋转。

图片 6

于是就出现了如下的效果:

图片 7

 

牛顿摆Loading

 

做好了卡带的效果后我的灵感欲罢不能,看到家里的牛顿摆就好想把它做成loading。

牛顿摆只有两端的小球会动,那么我们只要以绳子顶端为轴心旋转一定的角度就可以啦~于是我们使用Photoshop来简单画一个牛顿摆的图片。

但是,摆动速度并不是随便就可以的,毕竟也算是个自由落体运动。开始的时候会有个横向的加速度,然后就是有个向下的重力加速度,毕竟用户中只有少数是物理学家,所以只要有个大概的速度变化即可。也就是说小球开始运动先加速再减速,到最顶端后再加速。于是使用图片 8来设置速度。

搞定!于是牛顿摆的Loading是这样的:

图片 9

 

橘子甩汁Loading

 

就说我对取名字什么的不擅长。。。

在开头提到的那篇文章中,我看到了一个动图真的是萌我一脸血,让我不禁咽了咽口水。

就是这货!!

图片 10

其实叫“橘子甩汁”还是挺形象的==

这里,我将整个动画分为三部分。

图片 11

第一部分是整个的进度条动画,这里我们的第一个颜值略低的进度条就派上了用场。我们将背景色换成黄色,然后给进度条加上8px的border就可以啦。

第二部分是最右边的橘子切面,只要固定好位置就可以,注意,一定要将它置到最顶。

第三部分就是橘子果肉部分,因为要向不同方向旋转不同路径运动,所以我分成了三个状态。图片 12

图片 13

图片 14

translate为平移运动,translate(left的值,top的值);rotate从0到360度为逆时针转动,反之为顺时针转动。通过给translate和rotate设置的值不同,就可以改变果肉运动的状态。然而我们不可以让他们同时间出现,那么我们可以为其中一个果肉动画设置delay图片 15,这样就有了果肉不断被甩出的效果。

css3动画十分简单有趣,只要通过简单的平移变换的组合就可以做出很多可爱的动效。

 

如果loading动画不再是菊花,那么等待也不再是件痛苦的事了。

1 赞 1 收藏 评论

图片 16

atitit.loading的设计与实现控件选型attilax 总结

网页中图片旋转一般有下面三种常见的实现方式:

 

一、 ie 滤镜

1. Percentage Loader(推荐) 1

IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。

1.1. 起始百分比::调整  progress 1

浏览器支持: IE5.5

2. CSS3 Loading Spinners Without Images 2

CSS代码: 

2.1.1. CSS Transforms 2

.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }  

2.1.2. Animation 3

JS代码:

3. Ajax Style Loading Animation in CSS3 ( no Images ) 3

element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";  

4. PageLoading - jQuery plugin 5

IE滤镜旋转演示:

5. Edit fiddle - JSFiddle.htm 5

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ie-filter-rotate</title> </head> <body> <div id="odiv" style="position:absolute; left:270px; top:45px;" > <a href=" style="border:none" src='' /></a> </div> <p style="line-height:1.5em"> <button onclick="rotate()"> rotate</button> <button onclick="odiv.style.filter=''">clear filter</button> <a href=" galaxy note 10.1</a> <br /> <span id="info">rotation=0,旋转0度</span> </p> <br/> <script> var i=0; function rotate(){ var oDiv = document.getElementById("odiv"); if( !document.body.filters ){ alert("这个浏览器不支持滤镜"); return; } i>=3 ? i=0 : i ; oDiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=' (i) ')'; document.getElementById("info").innerHTML= "rotation=" i ",旋转" (i*90) "度" } </script> </body> </html>

6. jQuery Circular Progress Bar 5

二、 CSS3 transform

7. jQuery Progress Bar 6

css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点为元素的中心。

8. 参考 6

浏览器支持:Firefox 4 、Oprea 10 、Safari 3.1 、Chrome 8 、IE 9

 

CSS代码:

1. Percentage Loader(推荐)

一款轻量的 jQuery 进度条插件,以百分比的形式呈现加载进度,同时显示已加载的内容大小。

.rotate{
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}  

1.1. 起始百分比::调整  progress 

 

  var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.01, onProgressUpdate : function(val) {

  var totalKb = 3000;  ///  more bit more time 

作者:: 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: 

 

 

JS代码:

2. CSS3 Loading Spinners Without Images

element.style.webkitTransform="rotate(-90deg)"
element.style.MozTransform="rotate(-90deg)"
element.style.msTransform="rotate(-90deg)"
element.style.OTransform="rotate(-90deg)"
element.style.transform="rotate(-90deg)";

2.0.1. CSS Transforms

CSS transform (in Firefox 3.5  and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

 

 

 

transform:rotate(45deg) translate(0, -35px);

If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

css3 tranform rotate 旋转演示:

2.0.2. Animation

Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

The code for the CSS animation is fa

 

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>css 3 transform rotate</title> <style> a img{ border:none} </style> </head> <body> <div id="rotate" style=" cursor:pointer; position:absolute; left:100px; top:100px"> <a href=" src="" /></a><img src="" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <script> (function(){ var element = document.getElementById("rotate"); var r = 0; var i = 1; function rotate(){ r = i; if( Math.abs(r) >= 25 ) i*=-1 element.style.MozTransform = "rotate(" r "deg)"; element.style.webkitTransform ="rotate(" r "deg)"; element.style.msTransform = "rotate(" r "deg)"; element.style.OTransform = "rotate(" r "deg)"; element.style.transform = "rotate(" r "deg)"; } var timer = setInterval(rotate,50); element.onmouseover = function(){ clearInterval(timer); timer = null; }; element.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,30); }; }()); </script> </body> </html>

3. Ajax Style Loading Animation in CSS3 ( no Images )

 

 

 

 

 

Facebook style

HTML

 <div id='facebook' >             <div id='block_1' class='facebook_block'></div>             <div id='block_2' class='facebook_block'></div>             <div id='block_3' class='facebook_block'></div></div>

CSS

#facebook{ margin-top:30px; float:left;}.facebook_block{ background-color:#9FC0FF; border:2px solid #3B5998; float:left; height:30px; margin-left:5px; width:8px;        opacity:0.1; -webkit-transform:scale(0.7); -webkit-animation-name: facebook;  -webkit-animation-duration: 1s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-direction: linear; }#block_1{  -webkit-animation-delay: .3s; }#block_2{  -webkit-animation-delay: .4s;}#block_3{  -webkit-animation-delay: .5s;}@-webkit-keyframes facebook{ 0%{-webkit-transform: scale(1.2);opacity:1;} 100%{-webkit-transform: scale(0.7);opacity:0.1;}}

三、 HTML5 canvas rotate

4. PageLoading - jQuery plugin

 

 

 

使用canvas 2d绘图上下文对象的context.rotate(angle)方法,通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点时画布的左上角。角度转换弧度的公式为:弧度 = 角度 * Math.PI / 180。

5. Edit fiddle - JSFiddle.htm

 

 

 

 

6. jQuery Circular Progress Bar

这款环形进度条加载插件可以非常灵活的定制外观、加载速度以及设置特定的进度值。

源码下载    在线演示

 

浏览器支持:Chrome 1.0 、Firefox 1.5 、Opera 9.0 、Safari 1.3 、IE 9

7. jQuery Progress Bar

一款非常简单的百分比进度条插件,可以参数灵活的控制百分比的增减,有动画效果。

源码下载    在线演示

 

 

JS代码:

8. 参考

 

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me.htm

10个漂亮的CSS3 jQuery的Loading加载条动画设计插件 - JavaScript - 酷站代码.htm

8款效果精美的 jQuery 加载动画和进度条插件 - 梦想天空(山边小溪) - 博客园.htm

8款效果精美的 jQuery 加载动画和进度条插件 - 梦想天空(山边小溪) - 博客园.htm

context = canvas.getContext("2d")
context.rotate(90 * Math.PI / 180);
context.drawImage(img, 0, -img.height);

 坐标旋转示意图:

图片 17

HTML5 canvas rotate旋转演示:

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>HTML5 canvas rotate</title> </head> <body> <a href=" src="" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br> <script> (function(){ var canvas = document.createElement("canvas"); canvas.style = "border:1px solid #ccc" var context = canvas.getContext("2d"); var img = new Image(); if(context == null){ return; } img.src=""; img.onload = function(){ var length = Math.sqrt(Math.pow(this.width, 2) Math.pow(this.height, 2));//计算画布大小,取图形的对角线,否则旋转时可能隐藏掉部分内容 canvas.width = length; canvas.height = length; //context.strokeRect(0, 0, length, length); context.translate(canvas.width/2, canvas.height/2);//平移坐标原点到画布中心 //context.rotate(30 * Math.PI / 180); context.drawImage(this, (-this.width / 2), ( -this.height / 2 )); timer = setInterval(rotate, 50); } var r = 0; var i = 1; function rotate(){ r = i; if( Math.abs(r) >= 25 ) i*=-1;//左右摆动25度 context.save();//保存坐标抽状态 context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height); context.rotate(r * Math.PI / 180); context.drawImage(img, (-img.width / 2), ( -img.height / 2 )); //把图片填充到画布中心 context.restore() //还原坐标抽状态 }; //绑定事件 canvas.onmouseover = function(){ clearInterval(timer); timer = null; }; canvas.onclick = function(){ location.href= ""; }; canvas.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,50); }; document.body.appendChild(canvas); }()); </script> </body> </html>

 

DEMO:

点击这里查看微博中图片放大、缩小、旋转的演示

 参考:

<<HTML5与CSS3权威指南图片 18 >> 1、第97页 5.4.1 节坐标变换; 2、第18章 CSS3中的变形处理

 

本文由星彩网app下载发布于前端技术,转载请注明出处:网页中图纸旋转的两种达成方式,loading的布置与

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。