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

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

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

比如下面这种刻度

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

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

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

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

2、呼吸灯效果

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

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

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

使用：

animation: breath_light 3s ease infinite;
复制代码

3、扫描效果

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

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

扫描的光拖影长度调整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>
复制代码