header_v1.7.40

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

87天前发布

原创文章 / 多领域 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

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

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


《基础篇》

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动画来使画面增添光彩。如果能够很好的借鉴电商这种重构和动画技法的话,那将是一个很有益的补充。


0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功