智能家居操作舱

我正在参与掘金创作者训练营第5期，点击了解活动详情

项目的边框和动画设计

完成个大框

首先设计个1280*965尺寸,背景颜色是#222430,border-radius是20px,内边距10px，这里我给大家看代码了

逼格超高的线条流动性边框

加入线性动画 介绍一下CSS中conic-gradient()函数是创建一个由渐变组成的图像

css 语法
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
复制代码

值	描述
from angle	可选。起始角度。默认值为 0deg
at position	可选。中心位置。默认居中。
color degree, ..., color degree	角渐变断点。该值包含一个颜色值，后跟一个可选的停止位置（ 0 到 360 之间的度数或 0% 到 100% 之间的百分比）。

.container-box::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: conic-gradient(#fff 20deg, transparent 120deg);
}
复制代码

大概这样的效果 在添加旋转动画

  animation: rotate 2s linear infinite;
  @keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
复制代码

说明：

• 执行时间2s;linear是指从开始到结尾匀速；infinite是无限次数

• 这里要把container-box::before的宽度和高度调整到170%，目的是在旋转的过程中，四个边都能无死角的扫射到，也不一定是170%，这里根据你的屏幕比调节

利用after中的content和 background:#222430属性把我们不想要的白色去掉

.container-box::after {
  position: absolute;
  content: "";
  width: 1244px;
  height: 929px;
  background: #222430;
  border-radius: 20px;
}
复制代码

这样一个逼格超高的线条流动性边框就做好了，一起欣赏一下

左侧样式

这里没啥难度，家电消耗图表格用的echarts完成的，我就不粘贴代码了，大家自己完成一下

右侧样式

右边的难度我觉得是自定义switch 代码查看 最终看一下完成的效果图