表格列表形式切换按钮动画效果-html代码-BFW代码库

表格列表形式切换按钮动画效果

代码语言：html

代码描述：表格列表形式切换按钮动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
<style>
.grid-list {
  --color: #F6F8FF;
  --background: #2B3044;
  --background-hover: #1E2235;
  --icon-color: #BBC1E1;
  padding: 6px 12px 6px 8px;
  margin: 0;
  display: -webkit-box;
  display: flex;
  outline: none;
  position: relative;
  border: none;
  border-radius: 9px;
  background: var(--b, var(--background));
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: scale(var(--scale, 1)) translateZ(0);
          transform: scale(var(--scale, 1)) translateZ(0);
  -webkit-transition: background .4s, -webkit-transform .15s;
  transition: background .4s, -webkit-transform .15s;
  transition: transform .15s, background .4s;
  transition: transform .15s, background .4s, -webkit-transform .15s;
}
.grid-list:active {
  --scale: .95;
}
.grid-list:hover {
  --b: var(--background-hover);
}
.grid-list.without-text {
  --background: #275EFE;
  --background-hover: #1548DB;
  --icon-color: #FFFFFF;
  padding: 6px;
}
.grid-list .ic.........完整代码请登录后点击上方下载按钮下载查看