header_v1.7.40

web前端经典教程之摇摆动画

57天前发布

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

让网页增添活力和动感的技术……!

在网页中,我们经常会看到一些小的左右摇摆的元素,这些小的元素让整个安静的网页有了些许活力和动感,像气球🎈、探照灯、人物头部之类的,而这些摇摆的元素主要用到的就是css里面的rotate属性,知识点不难,难的是你能不能恰到好处的运用,有道是“技术决定下限,审美和意识决定上限“。



通常我们用到的只是rorate二维的旋转,但是rotate其实还可以进行三维旋转,具体可以看我的那篇酷炫旋转,今天这一期效果主要是修改了旋转中心的旋转,也就是摇摆的效果了。通过设置元素的“transform-origin”,我们可以任意的改变其旋转中心,像上面这个案例就是把旋转中心水平平移一半,垂直方向移动80%左右;而下面那个案例垂直方向则基本是到底部,也就是平移100%了。



在原网页和视频教程中,这里的灯光闪动会细腻些,目前这gif动画是在PhotoShop中模拟的。不大喜欢直接录制成gif动画,因为如果是录制成gif动画的话,失帧现象会很明显的,而且带有透明通道的光录制出来比一般的图层效果还要差,所以做教程咱还是非常用心的,除了做这种为了便于理解的动画,还有整个网页的结构和资源的整合,我会让大家用更少的学习时间和认知难度掌握最本质的知识,不信你们可以看原网页,网页结构、图层结构要杂乱好多。



在企业实战当中,尤其是一些大活动,丰富场景用到的方法往往不是单纯的某一种,比方说这个旅游网的一个活动,除了用到一些摇摆还夹杂一些平移来使画面更饱满。



切图后的各个小素材如下所示。



整合的html结构如下所示,非常简洁有木有?



平常国美对待线上的这种专题页不太怎么重视的,但是今天发现这个大场景的动画做的还真是细致,已经不不大适合用来做教程了,真的很费心费力。还有目前所受到的关注比较少,导致我在到底出教程还是自主学习输入上有点摇摆不定。



部分素材图片如下所示



原网页:https://prom.gome.com.cn/html/prodhtml/topics/201809/4/Mid.html


就先不给大家做高清的动画和视频教程了,因为构建大场景的动画元素真的是太多太多了,这次就放这个录制的gif动画吧,图片素材也不给大家汇总了,代码也不精简成适合教学的片段了。虽然咱做教程是认真的,但是我发现也经不起这么折腾呀!!!为表歉意,我把网页源文件放上来,也让大家感受一下光组织素材的麻烦之处吧!

资料包:https://pan.baidu.com/s/14L78amiHVcwY3t6Ta1ldDQ


0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功