分享一些大屏可视化也许有用的css技巧

18,561 阅读3分钟

可视化大屏基本就是数据可视化,主题多为科技感为主。下面分享一些也许对你有用的css效果,都是比较简单的,如果后面有别的还会更新。

1、带蒙版的刻度镜头旋转效果

比如下面这种刻度

Tc3Ids.png

目的是实现镜头旋转时,上半部和下半部的刻度逐渐消失,只能看到左右两边的刻度镜头。此时就可以用到蒙版,用渐变蒙版遮挡住上边和下边的刻度即可,蒙版效果如下:

TcJPKO.gif
主要使用了mask-image和渐变效果linear-gradient搭配

.box {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent,
      orange,
      transparent
    ); // 增加遮罩蒙版 中间的颜色不重要
    /* -webkit-mask-repeat: no-repeat; */
    /*
    ...省略
    */
}

在线演示地址,将色块换成刻度的图片然后旋转就可以了。

2、呼吸灯效果

此效果可以加在需要高亮展示的地方,比如:

TcYtTH.gif
主要用到了brightness亮度滤镜。
定义一个呼吸灯效果的动画:

@keyframes breath_light {
    0% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(220%);
    
    100% {
        filter: brightness(100%);
    }
}

使用:

animation: breath_light 3s ease infinite;

3、扫描效果

扫描应该是许多科幻片中经常出现的镜头,扫描的拖影可以根据页面主题自己修改长度,我给一个标题背景增加了扫描效果:

T6O2v9.gif

大家可以根据自己实际需要加在适当的地方。

扫描的光拖影长度调整linear-gradient透明色的位置和伪元素宽度即可

.container-title-scanning{
    position: relative;
    overflow: hidden;
    &::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        width: 30px;
        height: 100%;
        background-image: linear-gradient(to right, transparent 0%, #00ffff 100%);  
        z-index: -10;
        animation: scanning 2s infinite linear;
        opacity: 0.7;
    }
}
/* 定义一个从左向右的扫描动画 */
@keyframes scanning {
    0% {
        left: 0; 
        opacity: 0.7;
    }
    90% {
        left: 100%;
        opacity: 0.3;
    }
    100% {
        right: -20px;
        opacity: 0;
    }
}

使用:

<div class="container-title">
    <span class="title-text container-title-scanning">项目分析</span>
</div>

4、镜面反光效果

页面的头部缺少特效?于是我增加了镜面反光效果,起初头部是这样的:

T4CfhD.png

这底部的反光,说明当前的灯光异常的强烈有木有,这大块的面积,不再加点镜面反光什么都感觉很浪费。一般反光都是斜着的,那么我们就先弄一个斜着的高光:

T4Pmv9.png

同样,利用渐变写一个:

background-image: linear-gradient(126deg, transparent 30%, #dbf3fb 48%, #e4f9ff 50%, #f9f9f9 52%, transparent 70%);

然后就是常规的操作,让反光动起来,从左至右:

T4icFK.gif

可以看到,即使做了淡入淡出,在淡出时,高光的地方还是很怪,超出了反光的物体。这时候就又用到我们的蒙版了:

mask-image: linear-gradient(160deg, orange 80%, transparent 80%);

让蒙版和右边的边缘刚好贴合:

T4k0V1.png T4A2WT.gif

可是这个反光在经过字体的时候,把字体挡住了,因为反光实际是渐变的颜色,这个渐变的白色没有白色字体白时,会显得反光经过反而变暗的错误效果。这时候可以使用混合模式:

mix-blend-mode: overlay;

最终效果:

T4EA1S.gif

样式代码:

.header-light{
    width: 100%;
    height: 100%;
    position: relative;
    mask-image: linear-gradient(160deg, orange 80%, transparent 80%); // 增加遮罩蒙版
    mix-blend-mode: overlay; // 增加颜色混合模式
    &::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        width: 126px;
        height: 95%;
        display: block;
        position: absolute;
        background-image: linear-gradient(126deg, transparent 30%, #dbf3fb 48%, #e4f9ff 50%, #f9f9f9 52%, transparent 70%); // 反光元素
        animation: scanning 5s infinite linear;
        opacity: 0.7;
    }
    @keyframes scanning {
        0% {
            left: -20px; 
            opacity: 0;
        }
        10% {
            opacity: 0.7;
        }
        70% {
            opacity: 0.7;
        }
        80% {
            left: 90%;
            opacity: 0;
        }
        100% {
            right: 0px;
            opacity: 0;
        }
    }

html使用:

<div class="header-light">
</div>

最后

如以上动画造成了卡顿问题,可将动画的移动方式换成transform的方式,开启gpu加速有利于提升性能。