给网站添加一个好看的小工具副标题

在网站首页添加一个小工具显示副标题，可以很好的展示网站工具，有需要的自取。

html

<div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">超强生产力，动力足！</span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div>

css

/*小工具副标题美化*/
.file-format {
  padding: 0 20px;
  height: 38px;
  background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
span.txt-file-format {
  font-size: 13px;
  font-weight: 700;
  color: #424866;
  line-height: 18px;
  margin-right: 17px;
}
i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
  background: url(/img/icon-ps.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}
i.icon_ai[data-v-2775696c] {
  background: url(/img/icon-ai.svg) no-repeat 50% / 100%;
}
i.icon_sketch[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url(/img/icon-sketch.svg) no-repeat 50% / 100%;
  vertical-align: middle;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
  background: url(/img/icon-3dMax.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}
i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
  background: url(/img/icon-cdr.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}
i.icon_c4d[data-v-2775696c] {
  background: url(/img/icon-c4d.svg) no-repeat 50% / 100%;
}
i.icon_blender[data-v-2775696c] {
  background: url(/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
/*小工具副标题美化*/