css实现一系列箭头图标效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一系列箭头图标效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  /* The values below should normally be placed under [data-css-icon], they're only at :root in this demo */
  --icon-bdw: 2px;
  --icon-size: 1.5rem;
  --size: 3.75rem;
}
[data-css-icon] {
  --animdur: .3s;
  --loading-animdur: 0.8s;
  --animtf: ease-in;
  --bdrs: 50%;
  --bgc: inherit;
  --c: currentcolor;
  --dots-bgc: silver;
  --dots-size: calc(var(--size, 2.5rem) / 5);
  --rgb: 0, 0, 0;

  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
[data-css-icon] i {
  --half: calc(var(--icon-size) / 2);
  align-items: center;
  background-color: var(--bgc);
  border-radius: var(--bdrs);
  box-sizing: content-box;
  display: inline-flex;
  height: var(--size);
  justify-content: center;
  position: relative;
  transition: background-color var(--animdur) var(--animtf);
  width: var(--size);
}
[data-css-icon] i b,
[data-css-icon] i::after,
[data-css-icon] i::before {
  --bdc: transparent;
  --bdrs: 0;
  --bdw: 0;
  --befc: unset;
  --bgcl: transparent;
  --cpa: none;
  --h: var(--icon-size);
  --l: initial;
  --o: 1;
  --pos: relative;
  --r: initial;
  --t: initial;
  --trf: none;
  --trfo: 50% 50%;
  --w: var(--icon-size);
  background-color: var(--bgcl);
  border-color: var(--bdc);
  border-radius: var(--bdrs);
  border-style: solid;
  border-width: var(--bdw);
  box-sizing: border-box;
  clip-path: var(--cpa);
  content: "";
  display: inline-block;
  height: var(--h);
  left: var(--l);
  margin: 0;
  opacity: var (--o);
  position: var(--pos);
  right: var(--r);
  top: var(--t);
  transform: var(--trf);
  transform-origin: var(--trfo);
  transition: all var(--animdur) var(--animtf);
  width: var(--w);
}
[data-css-icon] i::before {
  content: var(--befc);
}

/* ARROWS / CHEVRONS / TRIANGLES */
[data-css-icon*="arr-"] i::after,
[data-css-icon*="chv-"] i::after {
  --bdc: var(--c);
}
[data-css-icon*="arr-"] i::after {
  --bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
  --trf: rotate(45deg);
}
[data-css-icon*="chv-"] i::after {
  --bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
  --trl: calc(0px - (var(--icon-size) / 6));
  --trf: rotate(45deg) translate(var(--trl), var(--trl));
}
[data-css-icon*="arr-"] i::before {
  --trf: rotate(90deg) translateX(calc(0px - var(--icon-bdw)));
}
[data-css-icon*="tri-"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(10% 20%,50% 90%,90% 20%);
}
[data-css-icon*="-left"] i { transform: rotate(90deg); }
[data-css-icon*="-right"] i { transform: rotate(-90deg); }
[data-css-icon*="-up"] i { transform: rotate(180deg); }

/* LINES: MINUS, PLUS, EQUALS, MENU */
[data-css-icon*="arr-"] i::before,
[data-css-icon*="equals"] i::after,
[data-css-icon*="equals"] i::before,
[data-css-icon*="cross"] i::after,
[data-css-icon*="cross"] i::before,
[data-css-icon*="menu"] i b,
[data-css-icon*="menu"] i::after,
[data-css-icon*="menu"] i::before,
[data-css-icon*="minus"] i::after,
[data-css-icon*="plus"] i::after,
[data-css-icon*="plus"] i::before {      
  /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */
  --bgcl: var(--c);
  --befc: '';
  --h: var(--icon-bdw);
  --pos: absolute;
  --w: calc(var(--icon-size) * 1.4142135623730950488016887242097);
}
[data-css-icon*="cross"] i::after { --trf: rotate(45deg); }
[data-css-icon*="cross"] i::before { --trf: rotate(135deg); }
[data-css-icon*="cross-turn"] i::after { --trf: rotate(0deg); }
[data-css-icon*="cross-turn"] i::before,
[data-css-icon*="plus"] i::before { --trf: rotate(90deg); }
[data-css-icon*="equals"] i { --dist: calc(var(--icon-size) / 4); }
[data-css-icon*="equals"] i::after { --trf: translateY(var(--dist)); }
[data-css-icon*="equals"] i::before { --trf: translateY(calc(0px - var(--dist))); }
[data-css-icon*="menu"] i::after { --trf: translateY(var(--half)); }
[data-css-icon*="menu"] i::before { --trf: translateY(calc(0px - var(--half))); }

/* OTHER ICONS */
[data-css-icon*="bag"] i::after {
  --bdc: var(--c);
  --bdrs: 0.25em;
  --bdw: var(--icon-bdw);
}
[data-css-icon*="bag"] i::before {
  --bdc: var(-.........完整代码请登录后点击上方下载按钮下载查看