![](https://img-blog.csdnimg.cn/20201014180756780.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 评论 -
GIS地图描边特效的实现
先占个坑,有时间详细讲解先看实现效果思路•加载json•绘制闭合线,也称线环:该对象是闭合的(首尾坐标相同)•绘制面状几何体•添加矢量地理要素类地图选择器http://datav.aliyun.com/tools/atlas/#&lat=31.728167146023935&lng=104.2822265625&zoom=4阿里云提供的地理信息接口...原创 2020-07-17 09:31:11 · 2267 阅读 · 1 评论 -
可视化项目序列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 评论