web前端经典教程之酷炫旋转

让大型互联网商城专题页出彩的经典动画之一，特别适合营造大气的氛围。

课程的设置总共分为基础篇、梦幻紫色篇、同心旋转篇、佛光普照篇、局部旋转篇，知识点比较成体系，不像空中楼阁一样，就拿这期旋转来说，从基础篇基本的原地旋转，讲到那种能改变旋转方向的旋转，从前两种单一元素的旋转讲到同心的多元素旋转，又从前三种圆满的圆形元素旋转讲到间隙元素的旋转，最后又从前面这些中心点明显的旋转，拓展到中心点不在本身的局部旋转……

 

《基础篇》

1. 头部动画元素只有下面那个转盘，由浅入深的从掌握基本的定位布局到辅以动画，为学习后面复杂一点的案例做铺垫，文章末尾附有高清实操视频。

 

 

2. 切图的时候把装饰性元素和文案分开，剩余的背景单独切出来，如果觉得画面动画元素过少，还可以对装饰性元素设置一些下落、上升之类的动画……

 

 

3. 下面的代码就可以完成布局了，html结构中的"class", 表示为一个类，对应着css中的英文句号"."，用来把某一个类别选出来。比方说你要给某些设计师提需求，css中的.beautiful就对应着一群漂亮的设计师，当然这个类的名字可以任由你取，如果要精确到某个设计师，就要用id，id就像身份证一样是唯一的，身份证的英文是identification。html里用"id", css中就要用"#"。

 

 

《梦幻紫色篇》

1. 下面这个除了可以改变旋转方向，还有其他动画衬托，录制的gif动画没有打开的html文件那么细腻和完整，具体效果可以在后面的视频里可以看到，非常大气和梦幻。

 

 

2. 切好的图片素材如下，除了单独把宽度为1900像素背景图用图片标签引进html文档，其他元素我统一放到一个居中的叫做“decorate”盒子里，以方便统一调整位置。

 

 

3. 以下html结构就可以完成设计稿的重构了，png图片跟上面的图片一一对应。

 

 

《同心旋转篇》

1. 来自旅游网的一个专题效果，只用到了单纯的旋转动画，通过延迟执行时间或者改变执行时长来控制同步或同频的节奏，从而营造出热闹而不单一的感觉。

 

 

2. 素材如下所示，其中背景图片跟基础篇的有所不同，本次以背景的方式引进html文档。

 

 

3. css样式代码如下，看起来比较多，但是很多结构大都是一样的，只是改改图片的宽度和位置，为了保证代码容易阅读，只写了webkit内核浏览器的兼容，其他的也很好改。

 

 

《佛光普照篇》

1. 可能以前武侠剧看多了，去了这样一个名字。其实是在一个企业官网看到的，效果非常棒，各种形式的动画相继出现，很是活泼，也有一种滚动加载的感觉。

 

 

2. 切出来的图片如下，很多宽度都是1920像素的，引入时要注意了，不然在小屏电脑上不会居中的，有的还要遮盖其他元素，超出部分要隐藏，如果能够把这个布局出来，布局基本没问题了。

 

 

3. css样式如下所示，理解了原理，很多都只用复制修改参数就好，这可比做设计那种主观的活儿要轻松，而代码只要掌握了一定的规则，就算忘记了，稍微看下就又会懂。而设计三天不做就会手生，经常改来改去，再加上众口难调，功底不是特别好的，改得你是一点脾气和成就感都没有。[/偷笑] 有没有说到某些人的心坎里？我就是因为这样，才下决心转行的。也是因为我做过设计，所以我的课程跟设计是非常的贴近，审美也基本可以满足设计师的味蕾，不同于教授枯草的理论，我讲的都是直接为企业实战服务的，实现的效果妥妥的摆在那里，动画和交互都看得见，既不是用BAT的名字使你信服，也不是用学员评价来忽悠。

 

 

《局部旋转篇》

1. 言归正传，下面的这种旋转跟上面的都不同，他不是以自我为中心旋转，而是为了一个大家共同的目标旋转奋斗，学习本节课能够让你精准的控制一个元素的运动轨道。

    

 

2. 图片素材如下，其中小球们都是有阴影的png图片，球心不是小球的圆形，从某种程度上增加了一定的难度，不过要是连这种中心点不一致的都能驾驭好，那就很棒了！

 

3. 平常的banner背景图片都是一整块，这里有切成均等的三块，跟以往的也不太一样。

 

 

感觉下面这个设计挺好看的，其实也可以做上面的动画效果，放在这里给大家点设计灵感。

 

      学了上面这几个专题的开发后，基本上对电商专题页面里重构、动画、交互有了一个很好的认识，并且对css3动画也有了一定对实操经验。如果你是游戏公司的设计师，提取设计稿的局部图片对你又不难，更有必要学习这方面的知识了。游戏专题的视觉稿是非常漂亮的，像TGideas、畅游视觉的，但是他们的那种漂亮跟电商不一样，电商专题的视觉侧重绘图和配色，而游戏专题侧重溶图和调色。这就决定了电商的专题页会干净、好切图一点，游戏类的专题页更加抽象，提取动画元素难一点，很少切细致，基本借助flash动画来使画面增添光彩。如果能够很好的借鉴电商这种重构和动画技法的话，那将是一个很有益的补充。

 

附高清实操视频：https://v.qq.com/x/page/n08041irjef.html