前天分享了一个数据大屏的纯CSS写的形状加了一个小动画，今天白天上班又做了一块动画，这一次算是完全掌握了CSS动画一些技巧以及mask到底谁遮谁的问题，过几天还是会忘的，从FLASH那会开始就对于遮罩像小孩子学数学掰手指头数数一样的难，谁在上谁在下，真的是完全一片混乱，这次的动画从开始到做完，是从完全懵到逐渐清醒，从不熟练到慢慢熟悉结束。可算是又进了一小步，动画还是略显生硬，这个要调到丝滑合理，可能还需要慢慢的尝试，有可能是数学太差，有时候可能也真得是按像素去一点一点的调，正值，负值什么的，哈哈哈，数学差没办法啊😢。直接上案例，这次的动画有用到box-shadow的复制，还有background-position点击查看该效果的Demo

数据大屏这个东西近几年貌似挺火的，自从去年年初重回正行后，做过几个了，每一次做都有更新的想法，数据大屏这东西是对设计要求挺高的，科技感强，越花里胡哨越看着正经，flex布局真是好啊，弹的丝滑。最近找了一个模板，简单改改就过稿了，头部很刺激，原本一张图片就搞定的东西，我又贱贱的用CSS写出来了，自从看了张鑫旭大神的linear-gradient等渐变的教程，从此一发不可收拾，只要能用这个画什么图形，绝对不切图🤣项目都是保密的，就只拆出来头部的一个小效果记录分享一下。这代码写的有点肿就不上代码了，实接狠狠的点击下面的Demo预览一个纯CSS渐变画出来的数据大屏头部效果（部份拆解）