表格列表形式切换按钮动画效果-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 .icon {
  width: 24px;
  height: 24px;
  position: relative;
}
.grid-list .icon i {
  position: absolute;
  left: var(--left, 4px);
  top: var(--top, 4px);
  display: block;
  border-radius: 2px;
  width: var(--width, 7px);
  height: var(--height, 7px);
  background: var(--icon-color);
  -webkit-animation: var(--name, var(--dots-name, none)) var(--duration, var(--dots-duration, 0.5s)) var(--easing, var(--dots-easing, linear)) forwards var(--delay, var(--dots-delay, 0s));
          animation: var(--name, var(--dots-name, none)) var(--duration, var(--dots-duration, 0.5s)) var(--easing, var(--dots-easing, linear)) forwards var(--delay, var(--dots-delay, 0s));
}
.grid-list .icon .dots i:nth-child(1) {
  --x-middle: -8px;
  --y-middle: 10px;
  --x-end: -2px;
  --y-end: 12px;
  --x-back: 10px;
  --y-back: 7px;
  --x-back-end: 9px;
  --y-b.........完整代码请登录后点击上方下载按钮下载查看