动画收录

CSS 创建一个三角形

    <div class="triangle" ></div >
    .triangle {
      width: 0;
      height: 0;
      border - top: 20px solid #9C27B0;
      border - left: 20px solid transparent;
      border - right: 20px solid transparent;
    }

高度的过渡

注意：在每个动画帧上导致重排，如果在高度过渡的元素下方有大量元素，则会出现延迟

    <div class="trigger">
      Hover me to see a height transition.
      <div class="el">Additional content</div>
    </div>

    .el {
      transition: max-height 0.3s;
      overflow: hidden;
      max-height: 0;
    }
    .trigger:hover > .el {
      max-height: var(--max-height);
    }
    let el = document.querySelector('.el');
    let height = el.scrollHeight;
    el.style.setProperty('--max-height', height + 'px');

弹跳加载器动画

  <div class="bouncing-loader" >
      <div></div>
      <div></div>
      <div></div>
    </div >

    @keyframes bouncing-loader {
      to {
        opacity: 0.1;
        transform: translate3d(0, -16px, 0);
      }
    }
    .bouncing-loader {
      display: flex;
      justify-content: center;

    }
    .bouncing-loader > div {
      width: 16px;
      height: 16px;
      margin: 3rem 0.2rem;
      background: #8385aa;
      border-radius: 50%;
      animation: bouncing-loader 0.6s infinite alternate;

    }
    .bouncing-loader > div:nth-child(2) {
      animation-delay: 0.2s;
    }

    .bouncing-loader > div:nth-child(3) {
      animation-delay: 0.4s;
    }

自定义滚动条

注意：滚动条样式似乎不在任何标准轨道上。此技术仅适用于基于 WebKit 的浏览器

//1.用于::-webkit-scrollbar设置滚动条元素的样式
//2.用于::-webkit-scrollbar-track设置滚动条轨道的样式（滚动条的背景）。
//3.用于::-webkit-scrollbar-thumb设置滚动条拇指（可拖动元素）的样式。

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #1E3F20;
  border-radius: 12px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4A7856;
  border-radius: 12px;
}

拨动开关

<input type="checkbox" id="toggle" class="offscreen" />
    <label for="toggle" class="switch"></label>

    .switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.25);
      border-radius: 20px;
      transition: all 0.3s;
    }
    .switch:after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 18px;
      background-color: white;
      top: 1px;
      left: 1px;
      transition: all 0.3s;

    }
    input[type='checkbox']:checked + .switch:after {
      transform: translateX(20px);
    }
    input[type='checkbox']:checked + .switch {
      background-color: #7983ff;
    }
    .offscreen {
      position: absolute;
      left: -9999px;
    }

交错动画

<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;
  height: 100vh;
  justify-content: center;
  align-items: center;
  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;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      animation: wave 2s ease-out infinite;
    }

    @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;
  }
}