前端各种奇淫巧计层出不穷，对缺乏创造力和建设性的本人来说，一般都是到需要的时候才会去研究，没办法，信息量暴增的年代，总得有选择性地记忆吧。因为各种特殊原因，不得不用css3写个loading加载的动画效果。在渐变效果上，gif显然层次不够丰富。我对图片处理不在行，不过AE要求很高，于是到网上一搜有解决办法，就不辛苦设计部同事了。
关于CSS3动画效果，废话两句。或者是我程序写的有问题（我对自己写的东西一直很没自信，我从来不敢对别人说我是敲代码的，我只说我是写页面的），我写的CSS3整屏滑动的效果，相当让人纠结。页面滑动效果流畅，但是当前屏内的图片有撕裂的感觉。整屏滑动，每一屏都是各式各样的图片，各屏之间没有任何衔接。TL建议我图片加载完之后，再进行滑动。于是加了延时进行测试，仍然会有撕裂感觉。因为赶着出DEMO，我只好撤掉CSS3动画，换了一个基于jQuery的动画插件，自己再添点内容(又忍不住抱怨了，前端牛人太多了，TL天天丢插件过来，而且都是我没用过的，鸭梨巨大，唉)。图片加载完之后再滑动，效果相当的流畅，尤其是在ipad2和ipad3上面。下午找了个插件在ipad1上测试CSS3动画，发现并没有撕裂的效果，果然是我自己问题，看来怀疑自己是正确的。准备研究下这个插件，看看跟我自己写的区别在哪。（絮絮叨叨半天，我都不知道自己在说什么。下午看到一个网站，niucha网，多么帅气的名字啊，里面的文章果断很技术，基本没废话。不过话说OS这里是博客哦，那多一点废话也没关系吧。）
--------------------------------------------------------------------------------------------------------------------------------
我用的是下面第二种方案，然后结合项目设计稿做了适当调整，具体情况原作者已经解释的很清楚了，但为了防止我那悲剧的记性，我还是用最弱的办法，给里面的样式加备注吧。效果图懒得截了。反正，三个DEMO，第一个用图片做的，略显粗糙，第三个纯旋转效果，不够流畅。只有第二个，渐变加上伪旋转，富效果啊。最近天天被逼着用ipad测试，感觉都要被腐蚀了。
@-webkit-keyframes fade { //命名为 fade 的动画，前面的 -webkit- 是啥就不用废话了吧
from {opacity: 1;} // 最普通的效果，定义起始关键帧状态。这里，动画开始时 透明度为1，
to {opacity: 0.25;} // 结束时 透明度为0.25
}
div.spinner {
position: relative;
width: 30px;
height: 30px;
display: inline-block;
}
div.spinner div {
width: 20%;
height: 40%;
background: #000;
position: absolute;
left: 100%;
top: 100%;
opacity: 0; // safari中，我将0改为1也没变化，不过在FF里面是有区别的，待测试
-webkit-animation: fade 1s linear infinite; //启动fade动画效果，延时1S，平滑变化，无限次循环
-webkit-border-radius: 30px; //做圆角的关键。其实，只要radius值大于元素宽度的一半就能出漂亮的椭圆了。原理嘛，要扯到数学，远了。
}
div.spinner div.bar1 {
-webkit-transform:rotate(0deg) translate(0, -142%);
-webkit-animation-delay: 0s; //第一个小椭圆，延时0秒
}
[......]
div.spinner div.bar12 {
-webkit-transform:rotate(330deg) translate(0, -142%); // 旋转330°
-webkit-animation-delay: -0.0833s;
}
//最后一个小椭圆，延时0.0833S，因为是顺时针旋转，那么左侧最后一个小椭圆自然是延时最短的，也就是跟它右边也是第一个小椭圆效果反差最大的。唉，明天还是截个图好了。可以尝试把时间进行各种调整，能看到动画起始点的变化。
困死偶了，明天再来查漏补缺。。。
--------------------------------------------------------------------------------------------------------------------------------
【用css3制作旋转加载动画的几种方法】（尊重被转载者，O(∩_∩)O哈哈~）
原文如下，转载地址：http://www.cnblogs.com/powertoolsteam/archive/2012/04/11/2441735.html
--------------------------------------------------------------------------------------------------------------------------------
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。
方案1，图片辅助
传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：
@-webkit-keyframes rotate { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} } p#spinner { height: 30px; width: 30px; overflow: hidden; background: #000; -webkit-mask-image: url("data:image/png[...]"); -webkit-mask-size: 30px 30px; -webkit-animation-name: rotate; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } |
具体效果查看这里：Demo1
这个方案，只有safari可以很好地支持。chrome下支持不是很好，所以这是一个不太成熟的方案。
方案2， 纯CSS实现
方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。
这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。
@-webkit-keyframes fade { from {opacity: 1;} to {opacity: 0.25;} } div.spinner { position: relative; width: 30px; height: 30px; display: inline-block; } div.spinner div { width: 20%; height: 40%; background: #000; position: absolute; left: 100%; top: 100%; opacity: 0; -webkit-animation: fade 1s linear infinite; -webkit-border-radius: 30px; } div.spinner div.bar1 { -webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s; } [......] div.spinner div.bar12 { -webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s; } |
具体效果查看这里：Demo2
safari和chrome都能很好地渲染这个效果，并且也很容易定义实际大小，因为所有的bar的高度，宽度有是用百分比来定义的。缺点也很明显，需要定义12个bar，并且每个bar都要定义独立的css，相对来说html和css的代码量有点多。
方案3，这个方案类似sencha touch中实现的效果
方案的基本思想是：首先利用html和css呈现4个bar，再通过css的伪元素: before和：after定义每个bar的前后内容，这样使得由原始的4个bar产生12个bar的效果，其次通过css设置让12个bar的透明度逐渐递减，最后应用css3中旋转动画达到实际loading的效果。
.x-loading-spinner { font-size: 250%; height: 1em; width: 1em; position: relative; -webkit-transform-origin: 0.5em 0.5em; } .x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after { display: block; position: absolute; width: 0.1em; height: 0.25em; top: 0; -webkit-transform-origin: 0.05em 0.5em; -webkit-border-radius: 0.05em; border-radius: 0.05em; content: " "; } .x-loading-spinner > span.x-loading-top { background-color: rgba(170, 170, 170, 0.99); } .x-loading-spinner > span.x-loading-top::after { background-color: rgba(170, 170, 170, 0.9); } .x-loading-spinner > span.x-loading-left::before { background-color: rgba(170, 170, 170, 0.8); } .x-loading-spinner > span.x-loading-left { background-color: rgba(170, 170, 170, 0.7); } .x-loading-spinner > span.x-loading-left::after { background-color: rgba(170, 170, 170, 0.6); } .x-loading-spinner > span.x-loading-bottom::before { background-color: rgba(170, 170, 170, 0.5); } .x-loading-spinner > span.x-loading-bottom { background-color: rgba(170, 170, 170, 0.4); } .x-loading-spinner > span.x-loading-bottom::after { background-color: rgba(170, 170, 170, 0.35); } .x-loading-spinner > span.x-loading-right::before { background-color: rgba(170, 170, 170, 0.3); } .x-loading-spinner > span.x-loading-right { background-color: rgba(170, 170, 170, 0.25); } .x-loading-spinner > span.x-loading-right::after { background-color: rgba(170, 170, 170, 0.2); } .x-loading-spinner > span.x-loading-top::before { background-color: rgba(170, 170, 170, 0.15); } .x-loading-spinner > span { left: 50%; margin-left: -0.05em; } .x-loading-spinner > span.x-loading-top { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); } .x-loading-spinner > span.x-loading-right { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } .x-loading-spinner > span.x-loading-bottom { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .x-loading-spinner > span.x-loading-left { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } .x-loading-spinner > span::before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); } .x-loading-spinner > span::after { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); } .x-loading-spinner { -webkit-animation-name: x-loading-spinner-rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
@-webkit-keyframes x-loading-spinner-rotate { from { -webkit-transform: rotate(30deg); } to { -webkit-transform: rotate(330deg); } } |
具体效果查看这里：Demo3
这个方案是3个方案中应用css技术最彻底的一个，html的代码最少，并且也真正做到了旋转效果。缺点是不易扩展，chrome浏览器支持不是很理想。
综上分析，方案1浏览器支持不好，但是实现简单，方案2的html代码太多，但扩展好，浏览器支持不错，方案3的扩展性不好，浏览器支持也不好，但是较好地利用了css的特性。
如果开发桌面web系统，推荐方案2，如果是mobile系统，则方案2和方案3各有优势。
http://www.dkankan.com/archives/625?replytocom=27
1.要实现一个div有两面，然后rotateX，可以在js里决定何时触发该动画，以及修改front和back面的内容。
相关js代码
document.getElementById(‘person’+tempJson.posIndex).style.cssText=’-webkit-transform:rotateX(‘+(this.animateState[tempJson.posIndex]*180)+’deg)’;
//给person类选择器所在的div添加style，添加-webkit-transform的状态改变。因为person中有指定transition,所以可以产生动画。
记得这边是指定末态时的各属性值，不是增量！
index,css3 代码
<title>最近来访Demo</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<style type=text/css>
.container{
width:163px;
height: 160px;
background: url(./images/bg.jpg) no-repeat 0px 0px;
padding: 2px;
overflow: hidden;
}
.person{
position: relative;
float:left;
margin-left: 3px;
margin-bottom: 3px;
width:50px;
height:50px;
}
//刚开始的时候要隐藏back
.face.back{
display: none;
}
@media all and (-webkit-transform-3d) { //判定浏览器是否支持3d属性
/* Use the media query to determine if 3D transforms are supported */
.container {
-webkit-perspective: 1000; //?
}
.person {
width: 50px;
height: 50px;
//定义person上的3d动画，监听-webkit-transform 属性，动画间隔为1s,动画方式为ease-in-out （先慢，后快，然后再慢）
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
//隐藏背面，否则动画的过程中出现闪的情况
}
//back面需要选择180，然后隐藏背面，也就是说转过去的时候能够看到back的内容，并且即使是rotateX,back面里的内容也是正的。？？
.face.back {
display: block;
-webkit-transform: rotateX(180deg);
-webkit-box-sizing: border-box;
/* -webkit-border-radius: 10px; */
}
}
.person .info{
height: 10px;
width: 100%;
text-align: center;
font-size: 8px;
background-color: rgba(51,204,253,0.35);
}
//name和time这种图片上的信息，不能够设置为position:absolute;否则会导转到back面的时候，front面的name和time也同时显示出来了。应该是因为这二者脱离文档流的原因。
.person .name{
margin-top: 27px;
color:#ffff00;
}
.person .time{
margin-top:3px;
color:#66FF00;
}
</style>
<div id=”feedback face” style=”width:100%;height:auto;”></div>
<div class=”container”>
<div class=”person” id=’person0′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person1′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person2′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person3′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person4′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person5′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person6′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person7′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
<div class=”person” id=’person8′>
<div class=’front face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
<div class=’back face’><div class=’img’></div><div class=’name info’></div><div class=’time info’></div></div>
</div>
</div>
<script src=”honeyLife.js” type=text/javascript ></script>
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
