motionsites中文站 / 卡片 · Tidy Cobra
卡片 · Tidy Cobra
aadmin2026-09-19 发布组件0 阅读

卡片 · Tidy Cobra

类型:组件 · 分类:卡片 · 收录:2026-09-19 · 源码:会员可见

[hidecontent type="vip1"]
<div class="one-div"></div>
<style>
/* From Uiverse.io by Koopro - Source: Lynn Fisher - https://a.singlediv.com/ - Tags: windows, night, css */
.one-div {
  box-sizing: border-box;
  font-size: 10px;
  width: 20em;
  height: 25em;
  background-repeat: no-repeat;
  background-image: linear-gradient(#6a5acd, #6a5acd),
    repeating-linear-gradient(
      to bottom,
      #48d1cc,
      #48d1cc 0.1em,
      #6a5acd 0.1em,
      #6a5acd 0.4em,
      transparent 0.4em,
      transparent 0.9em
    ),
    linear-gradient(#6acd 40%, #48cc),
    radial-gradient(circle, #48d1cc 30%, rgba(72, 209, 204, 0) 31%),
    radial-gradient(circle, #7fffd4 50%, rgba(127, 255, 212, 0) 51%),
    linear-gradient(#41cc, #d1cc),
    linear-gradient(60deg, transparent 40%, #483d8b 41%),
    linear-gradient(-60deg, transparent 40%, #483d8b 41%),
    linear-gradient(to right, #48d1cc 0.1em, #483d8b 0.1em),
    linear-gradient(to bottom, #231e44 30%, #c71585);
  background-size: calc(100% - 0.4em) 2em, calc(100% - 0.6em) 6em, 0.1em 20em,
    1.1em 1.1em, 10em 10em, 5em 0.1em, 3.5em 2em, 3.5em 2em, 0.4em 5em,
    100% 100%;
  background-position: 50% 0.2em, 50% 2.7em, 1.1em 0.2em, 0.6em 19em, 80% 18%,
    right 3.8em bottom 2em, right 6em bottom 0, right 3em bottom 0,
    right 6em bottom 0, 0 0;
  border: 0.1em solid #48d1cc;
  border-top-color: #6a5acd;
  box-shadow: 0 0 0 0.8em #483d8b, 0 0 0 0.9em #6a5acd;
}

.one-div::before {
  width: 24em;
  height: 2em;
  background-color: #483d8b;
  border: 0.1em solid #6a5acd;
  border-top-color: #54c8c4;
  box-shadow: 0 1.4em 0 -0.8em #483d8b, 0 1.4em 0 -0.7em #6a5acd;
}

.one-div::after {
  background-color: #483d8b;
  border-radius: 2em 0;
  border-top: 0.1em solid #1d2d2d;
}

</style>
[/hidecontent]
← 返回首页