可视化大屏基本就是数据可视化,主题多为科技感为主。下面分享一些也许对你有用的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>
4、镜面反光效果
页面的头部缺少特效?于是我增加了镜面反光效果,起初头部是这样的:
这底部的反光,说明当前的灯光异常的强烈有木有,这大块的面积,不再加点镜面反光什么都感觉很浪费。一般反光都是斜着的,那么我们就先弄一个斜着的高光:
同样,利用渐变写一个:
background-image: linear-gradient(126deg, transparent 30%, #dbf3fb 48%, #e4f9ff 50%, #f9f9f9 52%, transparent 70%);
然后就是常规的操作,让反光动起来,从左至右:
可以看到,即使做了淡入淡出,在淡出时,高光的地方还是很怪,超出了反光的物体。这时候就又用到我们的蒙版了:
mask-image: linear-gradient(160deg, orange 80%, transparent 80%);
让蒙版和右边的边缘刚好贴合:
可是这个反光在经过字体的时候,把字体挡住了,因为反光实际是渐变的颜色,这个渐变的白色没有白色字体白时,会显得反光经过反而变暗的错误效果。这时候可以使用混合模式:
mix-blend-mode: overlay;
最终效果:
样式代码:
.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
加速有利于提升性能。