current position:Home>Smart home operation cabin

Smart home operation cabin

2022-08-06 19:44:53Onion, 94

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

The border around the project and animation design

To complete a big box

First of all, to design a1280*965尺寸,背景颜色是#222430,border-radius是20px,内边距10px,I give you to look at the code here

Pretend bility ultra high liquidity lines border

Join the linear animation 介绍一下CSS中conic-gradient()Function is to create aThe gradient of image

css 语法
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
复制代码
描述
from angle可选.起始角度.默认值为 0deg
at position可选.中心位置.默认居中.
color degree, ..., color degree角渐变断点.The value contains a color value,Followed by an optional stop position( 0 到 360 Between the degree of or 0% 到 100% 之间的百分比).
.container-box::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: conic-gradient(#fff 20deg, transparent 120deg);
}
复制代码

Probably the effect image.png In the add rotation animation

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

说明:

  • 执行时间2s;linearAt a constant speed refers to from the beginning to the end;infiniteIs unlimited

  • 这里要把container-box::beforeThe width and height adjustment to170%,Purpose is in the process of rotating,Four sides can no dead Angle shot to,也不一定是170%,According to the your screen than here

GIF 2022-8-6 星期六 14-44-04.gif 利用after中的contentbackground:#222430Attributes, remove the we don't want the white

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

Such a pretend bility ultra high liquidity line frame is ready,一起欣赏一下

GIF 2022-8-6 星期六 14-56-58.gif

左侧样式

这里没啥难度,Home appliance consumption figure forms withecharts完成的,我就不粘贴代码了,Your own work image.png

右侧样式

The difficulty of the right I think it is a customswitch 代码查看 Finally see complete rendering

image.png

copyright notice
author[Onion, 94],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/218/202208061924591994.html

Random recommended