前端css纯手搓布局_深色系列(2)_指标统计展示效果

Easy_Y
503 阅读3分钟

数据项展示区域-css拆解

image.png

1.使用flex属性完成4等分布局

image.png

<div class="father-box">
  <div class="child-box">1</div>
  <div class="child-box">2</div>
  <div class="child-box">3</div>
  <div class="child-box">4</div>
</div>

// 父元素设置flex属性
.father-box{ 
   display: flex;
   align-items: center;
}  
// 子元素
.child-box{
   width:0px;
   flex: 1 0 auto;
}

在CSS中，flex: 1 0 auto; 是一个简写属性，用于设置flex项目的flex-grow、flex-shrink和flex-basis属性。这个简写属性让你可以在一个声明中同时设置这三个值，从而更简洁地控制flex项目的尺寸和伸缩性。

flex: 1 0 auto; 的含义是：flex项目将尝试等比例放大以填充可用空间（如果有的话），但不会缩小以适应更小的容器空间，其基准尺寸将基于其自身的宽度和高度属性。这种设置常用于需要项目在容器空间充足时能够扩展，但在空间不足时保持其原始尺寸的场景

2.用关键帧动画来改变元素属性

这里以改变元素宽高来讲

image.png

// 定义关键帧动画
@keyframes iconSize {
  0% {width: 100%; height:100%;}
  50% {width: 95%; height:92%;}
  100% {width: 100%; height:100%;}
}
// 绑定动画
.el{
  width:100%;
  height:100%;
  animation:iconSize 2s linear infinite; 
}

animation: iconSize 2s linear infinite; 这行CSS代码是一个简写属性，用于在一个声明中同时设置多个动画相关的属性。具体来说，它对应于以下单独声明的组合：

  • animation-name: iconSize;：指定要应用的动画名称，这里是iconSize。
  • animation-duration: 2s;：设置动画的持续时间，这里是2秒。
  • animation-timing-function: linear;：定义动画的速度曲线，linear表示动画从头到尾的速度都是相同的，即匀速动画。
  • animation-iteration-count: infinite;：设置动画的重复次数，infinite表示动画将无限次重复。

数据底座区域-css拆解

image.png

1.图层拆解

我们可以先用css绘制一个长方形，然后通过 旋转角度来达到底座的显示效果 image.png

2.旋转注意事项

图层旋转的角度可以通过 transform: rotateX(30deg); 来设置。

旋转且要体现透视效果，这需要注意，在改图层父元素上添加透视属性perspective

在CSS中。perspective属性用于在3D空间中为元素设置透视效果。它定义了用户与z=0平面的距离，从而影响元素的大小和位置随着其z值变化的视觉表现。透视距离越小，透视效果越强烈，元素看起来会越小且距离感更强

image.png

// 父元素设置flex属性
.father-box{ 
   perspective:150; // 
   -webkit-perspective:150; /* Safari and Chrome */ 
}  
// 子元素
.child-box{
    width: 400px;
    height: 40px;
    background:linear-gradient(to bottom, rgba(#0d2857,0.8),rgba(#0d2857,1));
    border-radius: 4px;
    border:1px solid #0b4f81; 
    transform: rotateX(30deg);
}

在线查看完整效果

码上掘金在线地址:

代码存在不完善的地方，有些适配性不足等缺点，大家见笑了！ 此案例可以用在深色大屏中做统计指标数量展示使用。

avatar
文章
阅读
粉丝