![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
动效
小天使娜娜
90后前端妹纸,全栈开发
展开
-
Canvas + CSS3实现可视化项目开场动画
一、背景:在最近的可视化项目中,视觉设计采用钢铁的写实风格,整体页面布局为左中右,动效需要实现在刚进入页面时,左右板块撞向中间板块,产生撞击光效和火花飞散的动画效果。二、实现思路:需要考虑以下几个方面:整体页面的布局,左中右三个板块需要独立,分别绝对定位,不要耦合在一起; 使用css3实现撞击动效; 使用canvas绘制撞击后的火光和火花,光效可以径向渐变,火花飞舞的运动轨迹分别是左右方向的匀减速运动,上下方向的匀减速和匀加速,最后到飞舞消散的过程,粒子大小随机三、实现过程: 1.原创 2020-07-18 10:05:58 · 1212 阅读 · 3 评论 -
可视化项目序列3D翻牌动效实现
一、背景:在最近的数据看板可视化项目中,需要实现人员信息卡片序列翻动的动效,本文主要介绍该动效的实现原理和过程。二、实现思路:1.要想实现双面翻转,首先需要定义一个3D盒子;2.3D盒子中正反重合放置两张卡片,均正面朝外;3.利用CSS旋转动效实现3D盒子的翻转;4.序列化翻转需要设置时间差。三、实现过程:1.定义3D dom,包含3D容器,相对容器,正面卡牌,反面卡牌2.样式设置,css的运用(1)外层容器的样式:transform-style ..原创 2020-07-17 09:22:59 · 587 阅读 · 0 评论 -
css实现序列帧闪电动效
先看效果:实现原理1、需要视觉设计师提供一张雪碧图,包含多张动画状态,也就是所谓的序列帧,依次排列在一张图上;2、前端通过css去改变背景图的位置;3、将动画持续反复,类似于我么小时候玩过的翻书小动画;代码:<div class="rightLighting"></div>.rightLighting{ width:86px; ...原创 2019-07-19 17:01:34 · 1661 阅读 · 0 评论