![93addb2fb4cd98a7c375f3c60844e367.png](https://img-blog.csdnimg.cn/img_convert/93addb2fb4cd98a7c375f3c60844e367.png)
今天给大家分享一篇具有视觉创意的交互图文,是「小编备用」于今年4月交付「荣耀手机」的《光影之美 一瞬倾心》创意推送。
![cd126d49c7764bfbb4ec4dee779e1396.png](https://img-blog.csdnimg.cn/img_convert/cd126d49c7764bfbb4ec4dee779e1396.png)
(完整版效果展示)
从文章内容上看,该篇以荣耀手机的外观特性作为创意点,结合产品“光影之美”的宣传主题,开篇即具有光影律动般的动画效果有效吸引用户阅读注意。在技术层面上,我们主要基于SVG animation代码变化各元素的数值属性,为多种元素添加色彩变化、运动路径变换等动态效果,呈现具有丝滑流畅、无色差、不卡顿的矢量动画,同时也形象传达产品的认知感受。除此之外,采用SVG animation代码实现快闪动画效果的方式,将时尚潮流与科技感完美融合,添加点击触发内容的简单交互技术,使得图文更具创意性。
技术:代码快闪;自动播放动画,快闪动画播放若干秒后,点击触发图文内容
代码快闪产生交替的色彩变化和动画闪烁感,能够吸引用户眼球和保持有效阅读,满足了文章美观性也达到一定的传播效果。「小编备用」基于SVG代码快闪技术,产出优质的商业案例。
![8bf1445dbba96ed7b5e893e522d5b4e8.png](https://img-blog.csdnimg.cn/img_convert/8bf1445dbba96ed7b5e893e522d5b4e8.png)
SVG animation代码快闪动画,快闪动画自动播放,动画播放若干秒后,点击触发图文高度展开
总的来说,有效利用SVG技术可以为优质的内容辅以更出色的传播与表达方式,期待「小编备用」给品牌方交付更多有创意的交互图文。
技术:纯代码SVG快闪动画
文章来源:公众号【荣耀手机】
技术开发:公众号【小编备用】