跳到主要内容

CSS 经典实例

三维立方体​

实时编辑器

<div class="bruce flex-ct-x" data-title="三维立方体">
  <div class="td-cube">
    <ul>
      <li class="front">1</li>
      <li class="back">2</li>
      <li class="top">3</li>
      <li class="bottom">4</li>
      <li class="left">5</li>
      <li class="right">6</li>
    </ul>
  </div>
</div>
结果
Loading...
$width: 150px;
$height: 150px;
$length: 150px;
.td-cube {
  width: $width;
  height: $height;
  perspective: 1000px;
  ul {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(-15deg) rotateY(15deg);
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  li {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $width;
    height: $height;
    color: #fff;
    font-size: 50px;
    opacity: 0.8;
    &.front {
      background-color: #f66;
      transform: translateZ($length / 2);
    }
    &.back {
      background-color: #66f;
      transform: rotateY(180deg) translateZ($length / 2);
    }
    &.top {
      background-color: #f90;
      transform: rotateX(90deg) translateZ($height / 2);
    }
    &.bottom {
      background-color: #09f;
      transform: rotateX(-90deg) translateZ($height / 2);
    }
    &.left {
      background-color: #9c3;
      transform: rotateY(-90deg) translateZ($width / 2);
    }
    &.right {
      background-color: #3c9;
      transform: rotateY(90deg) translateZ($width / 2);
    }
  }
}
@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(0);
  }
  to {
    transform: rotateY(-1turn) rotateX(-1turn);
  }
}

使用:hover 控制悬浮边框​

<div class="bruce flex-ct-x" data-title="使用:hover控制悬浮边框">
  <div class="dynamic-border">iCSS</div>
</div>
.dynamic-border {
  width: 200px;
  height: 80px;
  color: #f66;
  font-weight: bold;
  font-size: 50px;
  line-height: 80px;
  text-align: center;
  background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px, linear-gradient(
        -90deg,
        #f66 2px,
        #f66 2px
      ) no-repeat right top/2px 0,
    linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px, linear-gradient(
        -270deg,
        #f66 2px,
        #f66 2px
      ) no-repeat left bottom/2px 0;
  cursor: pointer;
  transition: all 300ms;
  &:hover {
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  }
}

标签导航​

<div class="bruce flex-ct-x" data-title="标签导航">
  <div class="tab-navbar">
    <input id="tab1" type="radio" name="tabs" hidden checked />
    <input id="tab2" type="radio" name="tabs" hidden />
    <input id="tab3" type="radio" name="tabs" hidden />
    <input id="tab4" type="radio" name="tabs" hidden />
    <nav>
      <label for="tab1">标题1</label>
      <label for="tab2">标题2</label>
      <label for="tab3">标题3</label>
      <label for="tab4">标题4</label>
    </nav>
    <main>
      <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
      </ul>
    </main>
  </div>
</div>
.active {
  color: #fff;
  background-color: #3c9;
}
.tab-navbar {
  display: flex;
  flex-direction: column-reverse;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
  input {
    &:nth-child(1):checked {
      & ~ nav label:nth-child(1) {
        @extend .active;
      }
      & ~ main ul {
        background-color: #f66;
        transform: translate3d(0, 0, 0);
      }
    }
    &:nth-child(2):checked {
      & ~ nav label:nth-child(2) {
        @extend .active;
      }
      & ~ main ul {
        background-color: #66f;
        transform: translate3d(-25%, 0, 0);
      }
    }
    &:nth-child(3):checked {
      & ~ nav label:nth-child(3) {
        @extend .active;
      }
      & ~ main ul {
        background-color: #f90;
        transform: translate3d(-50%, 0, 0);
      }
    }
    &:nth-child(4):checked {
      & ~ nav label:nth-child(4) {
        @extend .active;
      }
      & ~ main ul {
        background-color: #09f;
        transform: translate3d(-75%, 0, 0);
      }
    }
  }
  nav {
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #f0f0f0;
    label {
      flex: 1;
      cursor: pointer;
      transition: all 300ms;
    }
  }
  main {
    flex: 1;
    ul {
      display: flex;
      flex-wrap: nowrap;
      width: 400%;
      height: 100%;
      transition: all 300ms;
    }
    li {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
  }
}

折叠面板​

<div class="bruce flex-ct-x" data-title="折叠面板">
  <div class="accordion">
    <input id="collapse1" type="checkbox" hidden />
    <input id="collapse2" type="checkbox" hidden />
    <input id="collapse3" type="checkbox" hidden />
    <article>
      <label for="collapse1">列表1</label>
      <p>内容1<br />内容2<br />内容3<br />内容4</p>
    </article>
    <article>
      <label for="collapse2">列表2</label>
      <p>内容1<br />内容2<br />内容3<br />内容4</p>
    </article>
    <article>
      <label for="collapse3">列表3</label>
      <p>内容1<br />内容2<br />内容3<br />内容4</p>
    </article>
  </div>
</div>
.accordion {
  width: 300px;
  article {
    cursor: pointer;
    & + article {
      margin-top: 5px;
    }
  }
  input {
    &:nth-child(1):checked ~ article:nth-of-type(1) p,
    &:nth-child(2):checked ~ article:nth-of-type(2) p,
    &:nth-child(3):checked ~ article:nth-of-type(3) p {
      max-height: 600px;
      border-bottom-width: 1px;
    }
  }
  label {
    display: block;
    height: 40px;
    padding: 0 20px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    background-color: #f66;
    cursor: pointer;
  }
  p {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    line-height: 30px;
    border: 1px solid #f66;
    border-top: none;
    border-bottom-width: 0;
    transition: all 500ms;
  }
}

星级评分​

<div class="bruce flex-ct-x" data-title="星级评分">
  <div class="star-rating">
    <input type="radio" name="rate" />
    <input type="radio" name="rate" />
    <input type="radio" name="rate" />
    <input type="radio" name="rate" />
    <input type="radio" name="rate" />
  </div>
</div>
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  input {
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 300ms;
    appearance: none;
    &::after {
      color: #66f;
      transition: all 300ms;
      content: '☆';
    }
    &:hover {
      transform: scale(1.2);
    }
    &:checked,
    &:hover {
      &::after,
      & ~ input::after {
        color: #f66;
        content: '★';
      }
    }
  }
}

加载中​

<div class="bruce flex-ct-x" data-title="加载指示器">
  <div class="loading-indicator">加载中<span></span></div>
</div>
.loading-indicator {
  color: #09f;
  font-size: 16px;
  span {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    line-height: 1;
    vertical-align: -0.25em;
    &::after {
      display: block;
      white-space: pre-wrap;
      animation: loading 3s infinite step-start both;
      content: '...\A..\A.';
    }
  }
}
@keyframes loading {
  33% {
    transform: translate3d(0, -2em, 0);
  }
  66% {
    transform: translate3d(0, -1em, 0);
  }
}

螺纹进度条​

<div class="bruce flex-ct-x" data-title="螺纹进度条">
  <div class="thread-progressbar"></div>
</div>
.thread-progressbar {
  position: relative;
  width: 500px;
  height: calc(1.4142 * 20px);
  padding-right: 200px;
  background: repeating-linear-gradient(
      45deg,
      #3c9,
      #3c9 10px,
      transparent 11px,
      transparent 19px,
      #3c9 20px
    ) 0 0 content-box;
  animation: twill 1s linear infinite;
  &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(#000, 0.5), rgba(#fff, 0.5), rgba(#000, 0.5));
    content: '';
  }
}
@keyframes twill {
  to {
    background-position-y: calc(-1 * 1.4142 * 40px);
  }
}

立体按钮​

<div class="bruce flex-ct-x" data-title="立体按钮">
  <button class="stereo-btn">iCSS</button>
</div>
.stereo-btn {
  padding: 10px 20px;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 5px 5px #ccc;
  background-image: linear-gradient(#09f, #3c9);
  border: none;
  border-radius: 10px;
  outline: none;
  box-shadow: 0 10px 0 #09f;
  cursor: pointer;
  transition: all 300ms;
  &:active {
    box-shadow: 0 5px 0 #09f;
    transform: translate3d(0, 5px, 0);
  }
}

蛇形边框​

<div class="bruce flex-ct-x" data-title="使用clip描绘蛇形边框">
  <div class="snakelike-border"></div>
</div>
.snakelike-border {
  position: relative;
  width: 190px;
  height: 190px;
  background-color: #3c9;
  &::before,
  &::after {
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border: 5px solid;
    animation: move 5s linear infinite;
    content: '';
  }
  &::before {
    border-color: #f66;
  }
  &::after {
    border-color: #66f;
    animation-delay: -2.5s;
  }
}
@keyframes move {
  0%,
  100% {
    clip: rect(0 200px 5px 0);
  }
  25% {
    clip: rect(0 200px 200px 195px);
  }
  50% {
    clip: rect(195px 200px 200px 0);
  }
  75% {
    clip: rect(0 5px 200px 0);
  }
}

自动打字​

<div class="bruce flex-ct-x" data-title="自动打字">
  <div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
 overflow: hidden;
 border-right: 1px solid transparent;
 width: #{$count + 1}ch;
 font-family: Consolas, Monaco, monospace;
 white-space: nowrap;
 animation: typing #{$duration}s steps($count + 1) #{$delay}s infinite backwards,
  caret 500ms steps(1) #{$delay}s infinite forwards;
}
.auto-typing {
 font-weight: bold;
 font-size: 30px;
 color: #09f;
 @include typing(52, 5);
}
@keyframes caret {
 50% {
  border-right-color: currentColor;
 }
}
@keyframes typing {
 from {
  width: 0;
 }
}

水波​

<div class="loading">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #222;
}

.loading {
  $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080;
  display: flex;

  .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      animation: wave 2s ease-out infinite;
      content: '';
    }

    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        background: nth($colors, $i);

        &::before {
          animation-delay: $i * 0.2s;
        }
      }
    }
  }
}

@keyframes wave {
  50%,
  75% {
    transform: scale(2.5);
  }

  80%,
  100% {
    opacity: 0;
  }
}

腥红之月​

<div class="loading"></div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: black;
}

.loading {
  position: relative;
  width: 8em;
  height: 8em;
  background: black;
  border-radius: 50%;
  box-shadow: inset 0.5em -0.5em crimson;
  animation: spin 2s linear infinite;

  &::before,
  &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    box-shadow: inherit;
    content: '';
  }

  &::before {
    filter: blur(5px);
  }

  &::after {
    filter: blur(10px);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}