🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →

@huxy/materials

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@huxy/materials

js css materials

latest

Source

npm

Version: 1.1.6

Version published: 2 years ago

Maintainers: 1

Created: 4 years ago

Source

css 物料

在前端开发中，css 为我们的页面带来了生机与活力，我们可以使用它来创建各式各样的场景。如动效、形状、边框、文本等，下面简单介绍一下一些较常用的功能实现。

动效

css 动效主要有 animation 、transition 来实现。

css 3D

3D 旋转效果。

perspective 为 3D 转换元素定义透视视图。
transform-style: preserve-3d; 指定子元素定位在三维空间内。

.model-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: huxy-3d-models var(--time) linear 0s infinite;
}

3D 卡片

卡片翻转动效。

.huxy-card-fliper {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1000;
}
.card{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}
.front, .back{
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

轮播

通过 transform 设置偏移量和大小。

const style = {transform: `translate(${item.transform.x}px, ${item.transform.y}px) scale(${item.transform.s})`};

Loading

加载中效果。

@keyframes huxy-loading-ball {
  0% , 40% , 100%
  {
    transform: scale(0.2);
  }
  20%{
    transform: scale(1);
  }
}

.huxy-loading-ball {
  display: flex;
  .ball {
    background: var(--bgColor);
    box-shadow:0 0 var(--shadowSize) var(--bgColor);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    animation: huxy-loading-ball var(--time) ease-in-out var(--delay) infinite;
  }
}

wave

波浪效果。

@keyframes huxy-loading-wave {
  0% {
    width: 0;
    opacity: 0.1;
  }
  34% {
    width: 0;
    opacity: 0.5;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}
.huxy-loading-wave {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--waveColor);
    border-radius: 2px;
    opacity: 0;
    animation: huxy-loading-wave var(--waveTime) ease-out infinite;
  }
}

形状

css 可绘制各种各样形状，主要使用 box-shadow 、border 、border-radius 、transform 等属性。

time

@keyframes huxy-timer {
  100% {
    transform: rotate(360deg);
  }
}

.huxy-timer {
  width: var(--size);
  height: var(--size);
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 2px #fff;
}
.huxy-timer:after,
.huxy-timer:before {
  position: absolute;
  content: "";
  background: var(--color);
  height: var(--handWidth);
  transform-origin: 1px 1px;
  top: calc(var(--size) / 2 - var(--handWidth) / 2);
  left: calc(var(--size) / 2 - var(--handWidth) / 2);
}
.huxy-timer:after {
  width: var(--maxHeight);
  animation: huxy-timer var(--maxTime) linear infinite;
}

.huxy-timer:before {
  width: var(--minHeight);
  animation: huxy-timer var(--minTime) linear infinite;
}

search

.huxy-search {
  width: var(--size);
  height: var(--size);
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 1px var(--color);
  animation: huxy-search var(--time) linear infinite alternate;
}

.huxy-search:before {
  position: absolute;
  content: "me";
  font-size: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.huxy-search:after {
  position: absolute;
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background: var(--color);
  bottom: calc(var(--bar-width) - var(--bar-height));
  left: calc(var(--size) - var(--bar-width) * 2);
  border-radius: var(--bar-width);
  transform: rotate(-45deg);
}

location

@keyframes huxy-location {
  50% {
    top: calc(50% - var(--size) * 0.25);
  }
}
@keyframes huxy-location-back {
  50% {
    transform: translateX(-50%) scale(0.5);
  }
}

.huxy-location {
  position: relative;
  width: var(--size);
  height: var(--size);
}
.huxy-location:before,
.huxy-location:after {
  position: absolute;
  content: "";
}
.huxy-location:before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-46deg);
  width: calc(var(--size) * 0.75);
  height: calc(var(--size) * 0.75);
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 2px var(--color);
  animation: huxy-location var(--time) linear infinite;
}
.huxy-location:after {
  left: 50%;
  transform: translateX(-50%) scale(1);
  bottom: -50%;
  width: calc(var(--size) * 1.25);
  height: calc(var(--size) * 0.5);
  border-radius: 100%;
  background: var(--bgColor);
  animation: huxy-location-back var(--time) linear infinite;
}

spot

@keyframes huxy-spot {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.huxy-spot {
  display: inline-block;
  width: var(--size);
  height: var(--size);
  color: var(--color);
  background: currentColor;
  border-radius: 50%;
  position: relative;
}
.huxy-spot:before,
.huxy-spot:after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 50%;
  animation: huxy-spot 1.5s ease-in-out infinite;
}
.huxy-spot:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.huxy-spot:after {
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
}

angle

常用于展开与收缩图标。

.huxy-angle
  position: relative;
  display: inline-block;
  font-style: normal;
  float: right;
  cursor: pointer;
  height: 100%;
  width: 2 * @angleSize;
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 1px;
    background-color: currentColor;
    height: @width;
    width: @angleSize;
    left: 0;
    transform-origin: 100% 50% 0;
    transition: all 0.3s;
  }
  &::before {
    left: 0;
  }
  &::after {
    left: calc(@width * 0.7);
  }
}

arrow

常用于下拉框、提示框等。

.huxy-arrow
  position: relative;
  background: @arrowBgColor;
  border: 1px solid @arrowBorderColor;
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
  }
  &::before {
    border-width: @arrowSize;
  }
  &::after {
    border-width: @arrowSize - @arrowWidth;
  }
}

follow

常用于选中、active、hover等操作状态。

.huxy-follow
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    left: @followPadding;
    bottom: 0;
    top: auto;
    height: @followSize;
    width: calc(100% - @followPadding * 2);
    background-color: @followColor;
    transform: scale(0);
    transition: transform 0.3s;
  }
  &.active {
    &::after {
      transform: scale(1);
      transition: transform 0.3s;
    }
  }
}

太极图

.huxy-taiji {
  box-sizing: content-box;
  position: relative;
  width: var(--width);
  height: calc(var(--width) / 2);
  background: var(--white);
  border-color: var(--black);
  border-style: solid;
  border-width: var(--border) var(--border) calc(var(--width) / 2 + var(--border)) var(--border);
  border-radius: 100%;
  transform: rotate(90deg);
  &::before,
  &::after {
    content: "";
    position: absolute;
    box-sizing: content-box;
    width: calc(var(--width) / 8);
    height: calc(var(--width) / 8);
    border-radius: 100%;
    top: 50%;
  }
  &::before {
    left: 0;
    background: var(--black);
    border: calc(var(--width) * 3 / 16) solid var(--white);
  }
  &::after {
    left: 50%;
    background: var(--white);
    border: calc(var(--width) * 3 / 16) solid var(--black);
  }
}

图表

css 可绘制一些简单图表，主要使用 border-radius 、conic-gradient 、box-shadow 等实现。

card

.huxy-skeleton-card {
  position: relative;
  height: var(--height);
  background: var(--bgColor);
  overflow: hidden;
  .sk-card-left {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--height);
    height: 100%;
    .sk-card-img {
      width: 60%;
      height: 60%;
      border-radius: 50%;
      background: var(--leftColor);
      margin: 20% auto;
    }
  }
  .sk-card-right {
    margin-left: var(--height);
    margin-top: calc(var(--height) * 0.2);
    height: calc(var(--height) * 0.6);
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    .title,
    .text {
      margin: 0;
      border-radius: 4px;
      background: var(--rightColor);
    }
    .title {
      font-size: 2.2rem;
      height: calc(var(--height) * 0.22);
      width: var(--topWidth);
      margin-top: calc(var(--height) * 0.05);
    }
    .text {
      font-size: 1.6rem;
      height: calc(var(--height) * 0.18);
      width: var(--bottomWidth);
      margin-top: calc(var(--height) * 0.1);
    }
  }
}

progress

.huxy-progress-wave {
  position: relative;
  border-radius: var(--borderRadius);
  height: var(--height);
  background: var(--bgColor);
  overflow: hidden;
  color: #fff;
  &::before,
  &::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% * var(--percent) / 100);
    max-width: 100%;
    border-radius: var(--borderRadius);
    background: var(--progressColor);
    transition: width 1.5s ease-in;
  }
  &::before {
    counter-reset: percent var(--percent);
    content: counter(percent) "%";
    text-align: right;
  }
  &::after {
    background: var(--waveColor);
    opacity: 0;
    animation: huxy-progress-wave var(--waveTime) ease-out infinite;
  }
}

table

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  th {
    padding: 15px 4%;
    background: var(--thBgColor);
    span {
      display: block;
      height: 18px;
      border-radius: 2px;
      background: var(--thItemColor);
    }
  }
  td {
    padding: 12px 3%;
    span {
      display: block;
      height: 16px;
      border-radius: 2px;
      background: var(--tdItemColor);
    }
  }
  tr {
    transition: background 0.3s;
    &:hover {
      background: var(--hoverColor);
    }
    &:nth-of-type(odd) {
      background: var(--oddColor);
    }
  }
}

bar

.huxy-skeleton-barchart {
  border-left: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
  height: var(--height);
  position: relative;
  .sk-bar-item {
    --itemHeight: 60%;
    --bgColor: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-left: var(--space);
    width: var(--itemWidth);
    height: var(--itemHeight);
    background: var(--bgColor);
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.08);
  }
}

pie

.huxy-skeleton-piechart {
  width: var(--height);
  height: var(--height);
  background: conic-gradient(var(--color1) 0 var(--percent1), var(--color2) var(--percent1) var(--percent2), var(--color3) var(--percent2) var(--percent3), var(--color4) var(--percent3) var(--percent4));
  border-radius: 50%;
  box-shadow: 0 0 6px 6px rgba(255, 255, 255, 0.08);
}

list

.huxy-skeleton-list {
  background: var(--bgColor);
  padding: 15px var(--space);
  .sk-list-item {
    position: relative;
    border-radius: 2px;
    height: var(--itemHeight);
    width: calc(100% - var(--rightWidth) - var(--space));
    background: var(--leftColor);
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: calc(0px - var(--space) - var(--rightWidth));
      border-radius: 2px;
      height: var(--itemHeight);
      width: var(--rightWidth);
      background: var(--rightColor);
    }
    & + .sk-list-item {
      margin-top: calc(var(--space) - 2px);
    }
  }
}

dashboard

.huxy-skeleton-dashboard {
  --size: 400px;
  --width: 20px;
  --space: 20px;
  --color0: #fff;
  --color1: transparent;
  --color2: #f1462c;
  --color3: #fc5d2c;
  --color4: #fba73e;
  --color5: #e0fa4e;
  --color6: #12dd7e;
  --color7: #0a6e3f;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  background: conic-gradient(
    var(--color2) 0%,
    var(--color3) 12.4%,
    var(--color0) 12.4%,
    var(--color0) 12.5%,
    var(--color3) 12.5%,
    var(--color4) 24.9%,
    var(--color0) 24.9%,
    var(--color0) 25%,
    var(--color4) 25%,
    var(--color5) 37.4%,
    var(--color0) 37.4%,
    var(--color0) 37.5%,
    var(--color5) 37.5%,
    var(--color6) 49.9%,
    var(--color0) 49.9%,
    var(--color0) 50%,
    var(--color6) 50%,
    var(--color7) 62.4%,
    var(--color1) 62.4%,
    var(--color1) 62.5%
  );
  transform-origin: 50% 50%;
  transform: rotate(calc(-0.625 * 180deg));
}

ring

.huxy-animate-border-ring {
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  border-radius: 50%;
  .border-ring-item {
    --color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: var(--itemWidth);
    height: var(--itemHeight);
    background: var(--color);
    top: calc(var(--size) / 2);
    left: 0;
    transform-origin: calc(var(--size) / 2) calc(var(--itemHeight) / 2);
  }
}

circle

@keyframes huxy-animate-border-circle {
  0% {
    transform: translate(-50%, -50%) rotateZ(var(--rotateStart));
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(var(--rotateEnd));
  }
}

.huxy-animate-border-circle {
  position: relative;
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: 0px 0px 50px 15px var(--shadowInColor), inset 0px 0px 50px 15px var(--shadowInColor);
}
.border-circle-item {
  box-sizing: border-box;
  border-radius: 50%;
  position: absolute;
  width: var(--itemSize);
  height: var(--itemSize);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateZ(var(--rotateStart));
  border: var(--borderWidth) solid transparent;
  animation: huxy-animate-border-circle var(--time) linear infinite;
}

边框和背景

css 可绘制各种样式背景与边框，主要使用 linear-gradien 、border 、clip-path 等实现。

格子背景

.bg-box-grid {
  --bgColor: hsla(0, 0%, 100%, 1);
  --cubeColor: hsla(0, 0%, 100%, 0.3);
  --size: 20% 20%;
  background-image: linear-gradient(var(--bgColor) 15px, transparent 0), linear-gradient(90deg, var(--bgColor) 15px, transparent 0);
  background-size: var(--size);
  background-color: var(--cubeColor);
}

虚线格背景

.bg-box-dot {
  background-image: linear-gradient(var(--bgColor) 14px, transparent 0), linear-gradient(90deg, var(--cubeColor) 1px, transparent 0);
  background-size: 15px 15px, 15px 15px;
}

图片背景

.bg-box-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height:100%;
  width:100%;
  overflow: hidden;
}

四个角边框

.corner {
  position: relative;
  background: var(--bgColor);
  border: 2px solid var(--borderColor);
}
.corner:before,
.corner:after {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
}
.corner:before {
  top: -2px;
  bottom: -2px;
  left: var(--cornerSize);
  right: var(--cornerSize);
  border-top: 2px solid var(--bgColor);
  border-bottom: 2px solid var(--bgColor);
}
.corner:after {
  left: -2px;
  right: -2px;
  top: var(--cornerSize);
  bottom: var(--cornerSize);
  border-left: 2px solid var(--bgColor);
  border-right: 2px solid var(--bgColor);
}

对角边框

.corner-half {
  position: relative;
  border: 2px solid transparent;
}
.corner-half:before,
.corner-half:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--cornerSize) + 2px);
  height: calc(var(--cornerSize) + 2px);
  background-color: transparent;
  z-index: 3;
}
.corner-half:before {
  left: -2px;
  bottom: -2px;
  border-left: 2px solid var(--borderColor);
  border-bottom: 2px solid var(--borderColor);
}
.corner-half:after {
  top: -2px;
  right: -2px;
  border-top: 2px solid var(--borderColor);
  border-right: 2px solid var(--borderColor);
}

带标题边框

.huxy-title-border-wrap {
  font-size: var(--fontSize);
  position: relative;
  padding-top: 0.713em;
  .huxy-title-border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 3;
    &:before,
    &:after {
      content: "";
      height: var(--borderSize);
      background: var(--borderColor);
      flex-grow: 1;
    }
    &:before {
      margin-right: var(--space);
    }
    &:after {
      margin-left: var(--space);
    }
  }
}

虚线滚动边框

@keyframes huxy-border-animate-dash {
  100% {
    background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
  }
}
.huxy-border-animate-dash {
  position: relative;
  padding: var(--space);
  box-sizing: border-box;
  border: 1px solid transparent;
  background: linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x, linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x, linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y, linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y;
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: huxy-border-animate-dash 0.5s infinite linear;
}

对角滚动边框

@keyframes huxy-border-animate-solid {
  0%, 100% {
    clip-path: inset(0% 0% 66% 66%);
  }
  8.33% {
    clip-path: inset(0% 0% 33% 99%);
  }
  16.66% {
    clip-path: inset(33% 0% 0% 99%);
  }
  25% {
    clip-path: inset(66% 0% 0% 66%);
  }
  33.33% {
    clip-path: inset(99% 0% 0% 33%);
  }
  41.66% {
    clip-path: inset(99% 33% 0% 0%);
  }
  50% {
    clip-path: inset(66% 66% 0% 0%);
  }
  58.33% {
    clip-path: inset(33% 99% 0% 0%);
  }
  66.66% {
    clip-path: inset(0% 99% 33% 0%);
  }
  75% {
    clip-path: inset(0% 66% 66% 0%);
  }
  83.33% {
    clip-path: inset(0% 33% 99% 0%);
  }
  91.66% {
    clip-path: inset(0% 0% 99% 33%);
  }
}
.huxy-border-animate-solid::before, .huxy-border-animate-solid::after {
  content: "";
  position: absolute;
  --size: calc(0px - var(--space));
  top: var(--size);
  left: var(--size);
  right: var(--size);
  bottom: var(--size);
  border: 2px solid var(--borderColor);
  border-radius: var(--space);
  animation: huxy-border-animate-solid 6s infinite linear;
}

文本

css 可绘制各种效果文本，主要使用 text-shadow 、filter 、background-clip 等属性实现。

3D 文本

.text-3d-container {
  position: relative;
  width: var(--width);
  height: var(--width);
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  .text-3d-item {
    position: absolute;
    width: calc(var(--width) - var(--padding) * 2);
    height: calc(var(--width) - var(--padding) * 2);
    left: var(--padding);
    top: var(--padding);
    background-color: transparent;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateX(0deg) rotateY(90deg) rotateZ(var(--current));
    animation: huxy-text-3d var(--time) linear var(--delay) infinite;
    .text-3d-item-card {
      transform-style: preserve-3d;
      transform-origin: 50% 50%;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transform: rotateX(0deg) rotateY(90deg) rotateZ(var(--rotate));
    }
  }
}

模糊文本

@keyframes huxy-text-filter {
  0% {
    letter-spacing: -2.2rem;
    filter: blur(0.3rem);
  }
  50% {
    filter: blur(0.5rem);
  }
  90%, 100% {
    letter-spacing: 0.5rem;
    filter: blur(0rem);
  }
}

.huxy-text-filter {
  height: 32px;
  position: relative;
  filter: contrast(20);
  overflow: hidden;
}
.text-filter {
  text-transform: uppercase;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  letter-spacing: -2.2rem;
  animation: huxy-text-filter var(--time) infinite alternate ease-in-out;
}

文本 loading 效果

@keyframes huxy-text-loading {
  0% {
    max-width: 0;
  }
}
.huxy-text-loading {
  position: relative;
  color: var(--backColor);
  display: inline-block;
  &::before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    color: var(--frontColor);
    animation: huxy-text-loading var(--time) linear infinite;
  }
}

文本颜色渐变

@keyframes huxy-text-masked {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.huxy-text-masked { 
  background-image: linear-gradient(to right, var(--startColor), var(--endColor) 50%, var(--startColor) 50%, var(--endColor) 100%, var(--startColor));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: huxy-text-masked 2s infinite linear;
}

[tooltip] {
  position: relative;
  &::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #313131;
    white-space: nowrap;
    z-index: 1;
  }
  &:hover {
    &::after {
      display: block;
    }
  }
}

总结

很多时候，不必使用 js ，css 就可以实现很多功能和效果。以上是从之前实践中简单抽取了一些样式，封装为 css materials ，便于使用。使用方式如下：

import {IconAnimate, Css3dModel, Fliper, IconCarousel} from '@huxy/materials';

const Index = props => {
  return (
    <div>
      <div style={box}>
        <IconAnimate objs={animateObjs} models={cssModels} />
      </div>
      <div style={box}>
        <Fliper
          front={<div style={{background: 'var(--blue1)', ...fliperStyle}}>正面</div>}
          back={<div style={{background: 'var(--orange1)', ...fliperStyle}}>反面</div>}
          style={{height: 200, width: 200, margin: '0 auto'}}
        />
      </div>
      <div style={box}>
        <IconCarousel list={models} />
      </div>
    </div>
  );
};

export default Index;

以上效果可在 ihuxy 上查看。

Keywords

css

materials

react

FAQs

What is @huxy/materials?

Is @huxy/materials well maintained?

Package last updated on 24 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@huxy/materials

css 物料

动效

css 3D

3D 卡片

轮播

Loading

wave

形状

time

search

location

spot

angle

arrow

follow

太极图

图表

card

progress

table

bar

pie

list

dashboard

ring

circle

边框和背景

格子背景

虚线格背景

图片背景

四个角边框

对角边框

带标题边框

虚线滚动边框

对角滚动边框

文本

3D 文本

模糊文本

文本 loading 效果

文本颜色渐变

tooltip

总结

Keywords

Related posts

Large-Scale GitHub Actions Abuse Powers a Distributed cPanel and WHM Exploitation Campaign

New Study Identifies 53 Slopsquatting Targets Across 5 Frontier LLMs