常用的css特效（一）

程序员文章站 2022-05-28 22:09:17

...

1、交错动画

常用的css特效（一）

<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;
  animation-delay: 1s;

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

2、用JS分割文本

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：delay + Math.abs(i - middle) * step，其中中间元素的下标middle = letters.filter(e => e !== "").length / 2

<p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(16, 16, 16, 0.8),
      rgba(16, 16, 16, 0.8)),
    url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
  background-size: cover;
}

p {
  margin: 0 9em;
  font-size: 2em;
  font-weight: 600;
}

.landIn {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.8;
  color: white;
  font-family: Lora, serif;
  white-space: pre;

  span {
    animation: landIn 0.8s ease-out both;
  }
}

@keyframes landIn {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

let landInTexts = document.querySelectorAll(".landIn");
landInTexts.forEach(landInText => {
  let letters = landInText.textContent.split("");
  landInText.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.animationDelay = `${i * 0.05}s`;
    landInText.append(span);
  });
});

常用的css特效（一）

<div class="reveal">sword art online</div>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
}

.reveal {
  position: relative;
  display: flex;
  color: #6ee1f5;
  font-size: 2em;
  font-family: Raleway, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: pre;

  span {
    opacity: 0;
    transform: scale(0);
    animation: fadeIn 2.4s forwards;
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: white;
    opacity: 0;
    transform: scale(0);
  }

  &::before {
    left: 50%;
    animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }

  &::after {
    right: 50%;
    animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideLeft {
  to {
    left: -6%;
    opacity: 1;
    transform: scale(0.9);
  }
}

@keyframes slideRight {
  to {
    right: -6%;
    opacity: 1;
    transform: scale(0.9);
  }
}

let duration = 0.8;
let delay = 0.3;
let revealText = document.querySelector(".reveal");
let letters = revealText.textContent.split("");
revealText.textContent = "";
let middle = letters.filter(e => e !== " ").length / 2;
letters.forEach((letter, i) => {
  let span = document.createElement("span");
  span.textContent = letter;
  span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
  revealText.append(span);
});

3、随机粒子动画

常用的css特效（一）

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>

200 个 snow!!!

body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }
      
      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

4、伪类

<button
  data-text="Start"
  class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up"
>
  <div class="btn-borders">
    <div class="border-top"></div>
    <div class="border-right"></div>
    <div class="border-bottom"></div>
    <div class="border-left"></div>
  </div>
  <span class="btn-text">Start</span>
</button>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #1A1E23;
}

.btn {
  --hue: 190;
  --ease-in-duration: 0.25s;
  --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-duration: 0.65s;
  --ease-out-delay: var(--ease-in-duration);
  --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  padding: 1rem 3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  background-color: hsl(var(--hue), 100%, 41%);
  border: 1px solid hsl(var(--hue), 100%, 41%);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &:hover {
    background: hsl(var(--hue), 100%, 31%);
  }

  &-primary {
    --hue: 171;
  }

  &-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);

    &:hover {
      color: white;
    }
  }

  &-border-stroke {
    border-color: hsla(var(--hue), 100%, 41%, 0.35);

    .btn-borders {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .border-top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 1px;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleX(0);
        transform-origin: left;
      }

      .border-right {
        position: absolute;
        right: 0;
        width: 1px;
        height: 100%;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleY(0);
        transform-origin: bottom;
      }

      .border-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleX(0);
        transform-origin: left;
      }

      .border-left {
        position: absolute;
        left: 0;
        width: 1px;
        height: 100%;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleY(0);
        transform-origin: bottom;
      }

      // when unhover, ease-out left, bottom; ease-in right, top

      .border-left {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
      .border-bottom {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }

      .border-right {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
      .border-top {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
    }

    &:hover {
      color: hsl(var(--hue), 100%, 41%);
      background: transparent;

      .border-top,
      .border-bottom {
        transform: scaleX(1);
      }
      .border-left,
      .border-right {
        transform: scaleY(1);
      }

      // when hover, ease-in left, bottom; ease-out right, top

      .border-left {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
      .border-bottom {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }

      .border-right {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
      .border-top {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
    }
  }

  &-text-float-up {
    &::after {
      position: absolute;
      content: attr(data-text);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(35%);
      transition: 0.25s ease-out;
    }

    // when hover, ease-in top-text; ease-out bottom-text

    .btn-text {
      display: block;
      transition: 0.75s 0.1s var(--ease-out-exponential);
    }

    &:hover {
      // when hover, ease-in bottom-text; ease-out top-text

      .btn-text {
        opacity: 0;
        transform: translateY(-25%);
        transition: 0.25s ease-out;
      }

      &::after {
        opacity: 1;
        transform: translateY(0);
        transition: 0.75s 0.1s var(--ease-out-exponential);
      }
    }
  }
}

7、attr()生成文本内容

常用的css特效（一）

<ul class="float-text-menu">
  <li><a href="#" data-text="Home">Home</a></li>
  <li><a href="#" data-text="Archives">Archives</a></li>
  <li><a href="#" data-text="Tags">Tags</a></li>
  <li><a href="#" data-text="Categories">Categories</a></li>
  <li><a href="#" data-text="About">About</a></li>
</ul>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1A1E23;
}

.float-text-menu {
  display: flex;
  flex-direction: column;
  list-style-type: none;

  li {

    a {
      display: flex;
      padding: 6px;
      color: white;
      font-family: Lato, sans-serif;
      text-decoration: none;
      overflow: hidden;

      span {
        position: relative;
        transition: 0.3s;

        &::before {
          position: absolute;
          content: attr(data-text);
          transform: translateY(130%);
        }
      }

      &:hover {
        span {
          transform: translateY(-130%);
        }
      }
    }
  }
}

let floatTextMenuLinks = document.querySelectorAll(".float-text-menu li a");
floatTextMenuLinks.forEach(link => {
  let letters = link.textContent.split("");
  link.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.transitionDelay = `${i / 20}s`;
    span.dataset.text = letter;
    link.append(span);
  });
});

8、overflow障眼法

<button class="btn btn-primary btn-ghost btn-shine">
  hover me
</button>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #1A1E23;
}

.btn {
  --hue: 190;
  position: relative;
  padding: 1rem 3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background-color: hsl(var(--hue), 100%, 41%);
  border: 1px solid hsl(var(--hue), 100%, 41%);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &:hover {
    background: hsl(var(--hue), 100%, 31%);
  }

  &-primary {
    --hue: 187;
  }

  &-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);

    &:hover {
      color: white;
    }
  }

  &-shine {
    color: white;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        120deg,
        transparent,
        hsla(var(--hue), 100%, 41%, 0.5),
        transparent
      );
      transform: translateX(-100%);
      transition: 0.6s;
    }

    &:hover {
      background: transparent;
      box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
    }

    &:hover::before {
      transform: translateX(100%);
    }
  }
}

9、兄弟选择符定制表单元素

常用的css特效（一）

<form>
  <fieldset class="todo-list">
    <legend class="todo-list__title">My Special Todo List</legend>
    <label class="todo-list__label">
      <input type="checkbox" name="" id="" />
      <i class="check"></i>
      <span>Make awesome CSS animation</span>
    </label>
    <label class="todo-list__label">
      <input type="checkbox" name="" id="" />
      <i class="check"></i>
      <span>Watch awesome bangumi</span>
    </label>
    <label class="todo-list__label">
      <input type="checkbox" name="" id="" />
      <i class="check"></i>
      <span>Encounter awesome people</span>
    </label>
    <label class="todo-list__label">
      <input type="checkbox" name="" id="" />
      <i class="check"></i>
      <span>Be an awesome man</span>
    </label>
  </fieldset>
</form>

// color scheme: https://coolors.co/e63946-585b57-7b9fa1-264456-0b1420
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1A1E23;
}

.todo-list {
  display: flex;
  flex-direction: column;
  padding: 0 75px 10px 30px;
  background: #162740;
  border: transparent;

  .todo-list__title {
    padding: 3px 6px;
    color: #f1faee;
    background-color: #264456;
  }

  .todo-list__label {
    display: flex;
    align-items: center;
    margin: 40px 0;
    font-size: 24px;
    font-family: Lato, sans-serif;
    color: #f1faee;
    cursor: pointer;

    input[type="checkbox"] {
      opacity: 0;
      appearance: none;

      & + .check {
        position: absolute;
        width: 25px;
        height: 25px;
        border: 2px solid #f1faee;
        transition: 0.2s;
      }

      &:checked + .check {
        width: 25px;
        height: 15px;
        border-top: transparent;
        border-right: transparent;
        transform: rotate(-45deg);
      }

      & ~ span {
        position: relative;
        left: 40px;
        white-space: nowrap;
        transition: 0.5s;

        &::before {
          position: absolute;
          content: "";
          top: 50%;
          left: 0;
          width: 100%;
          height: 1px;
          background: #f1faee;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.5s;
        }
      }

      &:checked ~ span {
        color: #585b57;

        &::before {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }
}

11、border-radius

<nav class="navtab">
  <ul>
    <li class="navtab-item active">
      <svg t="1580196202692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="781" width="36" height="36"><path d="M555.541333 117.994667l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H640V746.666667c0-70.688-57.312-128-128-128s-128 57.312-128 128v170.666666H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0z" p-id="782" fill="currentColor"></path></svg>
      <span>Home</span>
    </li>
    <li class="navtab-item">
      <svg t="1580196351612" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1159" width="36" height="36"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m149.162667 222.901334L444.16 386.357333a96 96 0 0 0-57.802667 57.813334l-78.122666 216.992a42.666667 42.666667 0 0 0 54.602666 54.602666l217.002667-78.122666a96 96 0 0 0 57.802667-57.813334l78.122666-216.992a42.666667 42.666667 0 0 0-54.602666-54.602666zM512 565.333333a53.333333 53.333333 0 1 0 0-106.666666 53.333333 53.333333 0 0 0 0 106.666666z" p-id="1160" fill="currentColor"></path></svg>
      <span>Explore</span>
    </li>
    <li class="navtab-item">
      <svg t="1580196428669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2609" width="30" height="30"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="2610" fill="currentColor"></path></svg>
      <span>Collection</span>
    </li>
    <li class="navtab-item">
      <svg t="1580196480651" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2891" width="30" height="30"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 586.666667a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m-2.517333-373.333333c-48.416 0-92.746667 24.16-118.613334 63.413333a137.088 137.088 0 0 0-15.978666 33.237333 32 32 0 0 0 60.906666 19.690667c2.016-6.24 4.885333-12.202667 8.522667-17.717333C458.4 375.914667 482.709333 362.666667 509.482667 362.666667 552.277333 362.666667 586.666667 396.266667 586.666667 437.333333s-34.4 74.666667-77.194667 74.666667a32 32 0 0 0-32 32v64a32 32 0 0 0 64 0v-35.584C603.946667 558.197333 650.666667 503.232 650.666667 437.333333c0-76.757333-63.381333-138.666667-141.194667-138.666666z" p-id="2892" fill="currentColor"></path></svg>
      <span>Help</span>
    </li>
  </ul>
</nav>

@import url(https://fonts.googleapis.com/css?family=Lato);

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  @include center;
  height: 100vh;
  font-family: Lato, sans-serif;
  background: #ECEFFC;
}

.navtab {
  --navtab-width: 600px;
  --navtab-item-width: calc(var(--navtab-width) / 4 - 20px);
  --navtab-overlay-width: calc(var(--navtab-item-width) + 80px);
  --active-index: 0;

  position: relative;
  width: var(--navtab-width);
  height: 150px;
  background: white;
  border: 1em solid white;
  // https://9elements.github.io/fancy-border-radius/full-control.html#15.5.15.15-50.95.50.85-150.600
  border-radius: 5% 5% 15% 15% / 15% 15% 50% 50%;
  overflow: hidden;

  ul {
    @include center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;

    .navtab-item {
      @include center;
      z-index: 2;
      flex-direction: column;
      width: var(--navtab-item-width);
      height: 100%;
      color: #0288d1;
      cursor: pointer;
      transition: 0.5s ease;

      svg {
        transition: 0.5s ease;
      }

      span {
        font-size: 20px;
        user-select: none;
        opacity: 0;
        transition: 0.5s ease;
      }

      &.active {
        width: var(--navtab-overlay-width);

        svg {
          transform: translateY(-10px);
        }

        span {
          opacity: 1;
        }
      }
    }
  }

  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: var(--navtab-overlay-width);
    background: #b3e5fc;
    border-radius: 20px;
    transform: translateX(calc(var(--navtab-item-width) * var(--active-index)));
    transition: 0.5s ease;
  }
}

let navtab = document.querySelector("nav.navtab");
let navtabItems = document.querySelectorAll("li.navtab-item");
navtabItems.forEach((navtabItem, activeIndex) =>
  navtabItem.addEventListener("click", () => {
    navtabItems.forEach(navtabItem => navtabItem.classList.remove("active"));
    navtabItem.classList.add("active");
    (navtab as HTMLElement).style.setProperty(
      "--active-index",
      `${activeIndex}`
    );
  })
);

12、box-shadow

<ul class="pagination">
  <li class="page-prev">
    <a class="prev" href="#"><svg t="1580195949197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4493" width="20" height="20"><path d="M906.78272 588.78976c-0.02048 8.4992-6.88128 15.36-15.38048 15.37024l-443.6992-0.01024 75.70432 191.68256c2.51904 6.42048 0.48128 13.76256-5.03808 17.90976-5.51936 4.16768-13.13792 4.1472-18.61632-0.09216l-376.5248-289.47456c-3.77856-2.89792-6.00064-7.41376-6.00064-12.16512 0-4.78208 2.22208-9.27744 6.00064-12.1856l376.5248-289.47456c2.7648-2.11968 6.06208-3.19488 9.37984-3.19488 3.23584 0 6.5024 1.03424 9.23648 3.10272 5.51936 4.1472 7.5776 11.48928 5.03808 17.90976L447.68256 419.84l443.71968-0.01024c8.4992 0.01024 15.36 6.88128 15.36 15.36L906.78272 588.78976z" p-id="4494" fill="#777777"></path></svg></a>
  </li>
  <li class="page-number active"><a href="#">1</a></li>
  <li class="page-number"><a href="#">2</a></li>
  <li class="page-number"><a href="#">3</a></li>
  <li class="page-number"><a href="#">4</a></li>
  <li class="page-number"><a href="#">5</a></li>
  <li class="page-number"><a href="#">6</a></li>
  <li class="page-next">
    <a class="next" href="#"><svg t="1580195920917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4995" width="20" height="20"><path d="M906.77248 512c0 4.77184-2.21184 9.2672-5.9904 12.17536l-376.5248 289.4848c-2.7648 2.11968-6.06208 3.18464-9.3696 3.18464-3.25632 0-6.5024-1.03424-9.24672-3.09248-5.50912-4.15744-7.5776-11.48928-5.03808-17.90976l75.71456-191.67232L132.58752 604.17024c-8.48896 0-15.36-6.88128-15.36-15.36l0-153.6c0-8.48896 6.87104-15.36 15.36-15.36l443.72992 0-75.71456-191.68256c-2.53952-6.42048-0.47104-13.75232 5.04832-17.90976 5.50912-4.15744 13.12768-4.13696 18.60608 0.09216l376.5248 289.4848C904.56064 502.7328 906.77248 507.22816 906.77248 512z" p-id="4996" fill="#777777"></path></svg></a>
  </li>
</ul>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ECEFFC;
}

.pagination {
  --active-index: 0;
  display: flex;
  padding: 10px 20px;
  background: white;
  border-radius: 50px;
  box-shadow:
  0 0.3px 0.6px rgba(0, 0, 0, 0.056),
  0 0.7px 1.3px rgba(0, 0, 0, 0.081),
  0 1.3px 2.5px rgba(0, 0, 0, 0.1),
  0 2.2px 4.5px rgba(0, 0, 0, 0.119),
  0 4.2px 8.4px rgba(0, 0, 0, 0.144),
  0 10px 20px rgba(0, 0, 0, 0.2)
;
  list-style-type: none;

  li {
    margin: 0 5px;

    &.page-number {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;

      &:hover a {
        color: white;
        background: #777;
      }

      &.active a {
        color: white;
        background: #333;
      }
    }

    &.page-prev,
    &.page-next {
      font-weight: 700;
    }

    &.page-prev {
      margin-right: 20px;
    }

    &.page-next {
      margin-left: 20px;
    }

    a {
      display: block;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      text-decoration: none;
      color: #777;
      border-radius: 50%;
      transition: 0.3s;

      &.prev:hover path,
      &.next:hover path {
        fill: darken(#777, 50%);
      }
    }
  }
}

let prevLink = document.querySelector(".prev");
let nextLink = document.querySelector(".next");
let pagination = document.querySelector(".pagination");
let pageNumberLinks = document.querySelectorAll(".page-number a");
let maxPageIndex = pageNumberLinks.length - 1;
pageNumberLinks.forEach((pageNumberLink, activeIndex) => {
  pageNumberLink.addEventListener("click", () => {
    pageNumberLinks.forEach(pageNumberLink =>
      pageNumberLink.parentElement.classList.remove("active")
    );
    pageNumberLink.parentElement.classList.add("active");
    (pagination as HTMLElement).style.setProperty(
      "--active-index",
      `${activeIndex}`
    );
  });
});
prevLink.addEventListener("click", () => {
  pageNumberLinks.forEach(pageNumberLink =>
    pageNumberLink.parentElement.classList.remove("active")
  );
  let activeIndex = Number(
    (pagination as HTMLElement).style.getPropertyValue("--active-index")
  );
  activeIndex = activeIndex > 0 ? activeIndex - 1 : 0;
  pageNumberLinks[activeIndex].parentElement.classList.add("active");
  (pagination as HTMLElement).style.setProperty(
    "--active-index",
    `${activeIndex}`
  );
});
nextLink.addEventListener("click", () => {
  pageNumberLinks.forEach(pageNumberLink =>
    pageNumberLink.parentElement.classList.remove("active")
  );
  let activeIndex = Number(
    (pagination as HTMLElement).style.getPropertyValue("--active-index")
  );
  activeIndex = activeIndex < maxPageIndex ? activeIndex + 1 : maxPageIndex;
  pageNumberLinks[activeIndex].parentElement.classList.add("active");
  (pagination as HTMLElement).style.setProperty(
    "--active-index",
    `${activeIndex}`
  );
});

15、发光文本

<h1 class="glowIn">Hello World</h1>
<p class="glowIn">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu.</p>

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
      rgba(16, 16, 16, 0.8),
      rgba(16, 16, 16, 0.8)
    ),
    url(https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg);
  background-size: cover;
}

p {
  margin: 0em 5em 4em 5em;
}

h1, p {
  text-align: left;
  line-height: 1.8;
  font-family: Lora, serif;
}

.glowIn {
  color: white;

  span {
    animation: glow-in 0.8s both;
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
  65% {
    opacity: 1;
    text-shadow: 0 0 25px white;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.7;
  }
}

let glowInTexts = document.querySelectorAll(".glowIn");
glowInTexts.forEach(glowInText => {
  let letters = glowInText.textContent.split("");
  glowInText.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.animationDelay = `${i * 0.05}s`;
    glowInText.append(span);
  });
});

16、霓虹文本

<div class="neon">fushigi no monogatari</div>

@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: black;
}

.neon {
  color: #cce7f8;
  font-size: 2.5rem;
  font-family: 'Pacifico', cursive;
  text-transform: uppercase;
  animation: shining 0.1s alternate infinite;
}

@keyframes shining {
  from {
    text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
      0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
      0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
      0 0 54px rgba(15, 115, 223, 0.9);
  }
  to {
    text-shadow: 0 0 6px rgba(182, 211, 207, 1),
      0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
      0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
      0 0 60px rgba(15, 115, 223, 1);
  }
}

17、伪3D文本

<div class="loading">Loading</div>

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

@function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) {
  $shadows: ();

  // When dropped, it will shrink like a spring. When floating, it grows into its shape.
  @for $i from 1 to $depth {
    @if ($floating == false and $i > $depth / 2) {
      $shadow-color: transparent;
    }
    $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma);
  }

  // When dropped, the shadow reveals. When floating, the shadow fades.
  @if ($floating == false) {
    $shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma);
  } @else {
    $shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma);
  }

  @return $shadows;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #2980b9;
}

.loading {
  display: flex;
  color: white;
  font-size: 5em;
  font-family: "Baloo Bhaijaan", cursive;
  text-transform: uppercase;

  span {
    text-shadow: float-text-3d($floating: false);
    transform: translateY(20px);
    animation: bounce 0.3s ease infinite alternate;
  }
}

@keyframes bounce {
  to {
    text-shadow: float-text-3d($floating: true);
    transform: translateY(-20px);
  }
}

let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
  let span = document.createElement("span");
  span.textContent = letter;
  span.style.animationDelay = `${i / 10}s`;
  loading.append(span);
});

18、background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

常用的css特效（一）

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">archives</a></li>
  <li><a href="#">tags</a></li>
  <li><a href="#">categories</a></li>
  <li><a href="#">about</a></li>
</ul>

// https://picular.co/bluemoon

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #1A1E23;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  list-style-type: none;

  li {
    padding: 6px 0;

    a {
      --fill-color: #198CE6;
      position: relative;
      display: block;
      padding: 4px 0;
      font: 700 3rem Raleway, sans-serif;
      text-decoration: none;
      text-transform: uppercase;
      -webkit-text-stroke: 2px var(--fill-color);
      background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat;
      color: transparent;
      background-clip: text;
      transition: 0.5s linear;

      &:hover {
        background-size: 100%;
      }
    }
  }
}

19、linear-gradient

<dialog id="confirm-modal" class="modal">
  <div class="modal-content">
    <svg t="1574164208713" class="model-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5819" width="63" height="63"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 877.714286c-40.228571 0-73.142857-32.914286-73.142857-73.142857s32.914286-73.142857 73.142857-73.142857 73.142857 32.914286 73.142857 73.142857S552.228571 877.714286 512 877.714286zM585.142857 512c0 40.228571-32.914286 73.142857-73.142857 73.142857s-73.142857-32.914286-73.142857-73.142857L438.857143 219.428571c0-40.228571 32.914286-73.142857 73.142857-73.142857s73.142857 32.914286 73.142857 73.142857L585.142857 512z" p-id="5820" fill="white"></path></svg>
    <h2 class="modal-title">Are you sure?</h2>
    <p class="modal-description">
      You can't undo this action.
    </p>
    <div class="modal-options">
      <button
        class="btn btn-round btn-fill btn-fill-left option confirm"
        data-text="Yes"
        onclick="document.querySelector('#confirm-modal').close()"
      ></button>
      <button
        class="btn btn-round btn-fill btn-fill-right option cancel"
        data-text="No"
        onclick="document.querySelector('#confirm-modal').close()"
      ></button>
    </div>
  </div>
</dialog>
<form action="javascript:void(0);">
  <button
    class="btn btn-danger"
    onclick="document.querySelector('#confirm-modal').showModal()"
  >
    Delete history
  </button>
</form>

@import url(https://fonts.googleapis.com/css?family=Lato);

:root {
  --primary-color: hsl(171, 100%, 41%);
  --success-color: hsl(141, 53%, 53%);
  --danger-color: hsl(348, 86%, 61%);
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: Lato, sans-serif;
  background: #ECEFFC;
}

.btn {
  position: relative;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(0, 0%, 13%);
  text-decoration: none;
  background-color: white;
  border: transparent;
  border-radius: 3px;
  outline: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &-danger {
    color: white;
    background-color: var(--danger-color);

    &:hover {
      background-color: hsl(348, 86%, 53%);
    }
  }

  &-round {
    border-radius: 30px;
  }

  &-fill {
    overflow: hidden;

    &-left {
      &::before {
        transform: translateX(100%);
      }
    }

    &-right {
      &::before {
        transform: translateX(-100%);
      }
    }

    &::before {
      position: absolute;
      content: "";
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);
    }

    &::after {
      position: relative;
      content: attr(data-text);
      transition: 0.4s ease;
    }

    &:hover::before {
      transform: translateX(0);
    }

    &:hover::after {
      color: white !important;
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  color: white;
  background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  border: transparent;
  border-radius: 12px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
  animation: show-modal 0.5s ease forwards;

  &::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
  }

  .model-icon {
    margin-bottom: 1.25rem;
    opacity: 0;
    animation: show-modal-icon 0.5s ease 0.2s forwards;
  }

  .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding: 1em;

    .modal-title {
      margin-top: 0;
      margin-bottom: 1.2rem;
      opacity: 0;
      animation: show-modal-text 0.5s ease 0.35s forwards;
    }

    .modal-description {
      margin: 0;
      opacity: 0;
      animation: show-modal-text 1s ease 0.5s forwards;
    }

    .modal-options {
      margin-top: 1rem;
      display: flex;
      justify-content: space-around;

      .option {
        padding: 0 2em;
        margin: 0.3em;
        font-size: 20px;
        font-weight: 700;
        line-height: 2;
      }

      .confirm {
        opacity: 0;
        animation: show-modal-option 0.5s ease 0.65s forwards;

        &::before {
          background: var(--success-color);
        }

        &::after {
          color: var(--success-color);
        }
      }

      .cancel {
        opacity: 0;
        animation: show-modal-option 0.5s ease 0.8s forwards;

        &::before {
          background: var(--danger-color);
        }

        &::after {
          color: var(--danger-color);
        }
      }
    }
  }
}

@keyframes show-modal {
  from {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes show-modal-icon {
  from {
    transform: scale(0.4);
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes show-modal-text {
  from {
    transform: scale(0.6);
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes show-modal-option {
  from {
    transform: scale(0.4);
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

20、radial-gradient

径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的div元素。

常用的css特效（一）

<button class="btn btn-pink btn-bubbles">Click Me</button>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #ECEFFC;
}

@function sample($list) {
  @return nth($list, random(length($list)));
}

@function bubbles($color, $count: 16) {
  $bubbles: ();
  // define your own bubbles here!
  $bubble-types: (
    radial-gradient(circle, $color 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, $color 20%, transparent 30%)
  );
  @for $i from 1 through $count {
    $bubbles: append($bubbles, sample($bubble-types), comma);
  }
  @return $bubbles;
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

@function random_sizes($count: 16) {
  $sizes: ();
  @for $i from 1 through $count {
    $sizes: append(
      $sizes,
      (random_range(10, 20) * 1%) (random_range(10, 20) * 1%),
      comma
    );
  }
  @return $sizes;
}

.btn {
  --hue: 190;
  --btn-bg-color: hsl(var(--hue), 100%, 50%);
  --btn-bg-color-darker: hsl(var(--hue), 100%, 45%);
  position: relative;
  padding: 0.75rem 1.5rem;
  margin: 1rem;
  font-size: 1rem;
  font-family: Lato, sans-serif;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-bg-color);
  border-radius: 4px;
  box-shadow:
  0 0.1px 0.7px rgba(233, 30, 99, 0.141),
  0 0.1px 1.7px rgba(233, 30, 99, 0.202),
  0 0.3px 3.1px rgba(233, 30, 99, 0.25),
  0 0.4px 5.6px rgba(233, 30, 99, 0.298),
  0 0.8px 10.4px rgba(233, 30, 99, 0.359),
  0 2px 25px rgba(233, 30, 99, 0.5)
;
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &-pink {
    --hue: 330;
  }

  &-bubbles {
    overflow: visible;
    transition: transform ease-in 0.1s, background-color ease-in 0.1s,
      box-shadow ease-in 0.25s;

    &::before {
      position: absolute;
      content: "";
      left: -2em;
      right: -2em;
      top: -2em;
      bottom: -2em;
      transition: ease-in-out 0.5s;
      background-repeat: no-repeat;
      background-image: bubbles(var(--btn-bg-color));
      background-size: random_sizes();
      background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
      animation: bubbles ease-in-out 0.75s forwards;
    }

    &:active {
      transform: scale(0.95);
      background: var(--btn-bg-color-darker);

      &::before {
        // when the clicked mouse is up, trigger the animation.
        animation: none;
        background-size: 0;
      }
    }
  }
}

@keyframes bubbles {
  0% {
    background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
      65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
      64% 70%, 80% 71%;
  }

  50% {
    background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
      75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
      68% 96%, 95% 100%;
  }

  100% {
    background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
      100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
      100% 100%;
    background-size: 0% 0%;
  }
}

21、conic-gradient

<div class="gauges">
  <a
    class="gauge gauge-primary"
    href="#"
    style="--gauge-value:900;--gauge-max-value:1000;"
  ></a>
  <a
    class="gauge gauge-secondary"
    href="#"
    style="--gauge-value:800;--gauge-max-value:1000;"
  ></a>
  <a
    class="gauge gauge-success"
    href="#"
    style="--gauge-value:700;--gauge-max-value:1000;"
  ></a>
  <a
    class="gauge gauge-info"
    href="#"
    style="--gauge-value:600;--gauge-max-value:1000;"
  ></a>
  <a
    class="gauge gauge-warning"
    href="#"
    style="--gauge-value:500;--gauge-max-value:1000;"
  ></a>
  <a
    class="gauge gauge-danger"
    href="#"
    style="--gauge-value:400;--gauge-max-value:1000;"
  ></a>
</div>

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.gauges {
  display: flex;
}

.gauge {
  margin: 1rem;
}

22、backdrop-filter

<div class="frosted-glass">
  <h1 class="title">sakura</h1>
</div>

@import url("https://fonts.googleapis.com/css?family=Lato:200");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
  background-size: cover;
  background-position: center;
}

.frosted-glass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72vw;
  height: 36vh;
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  transition: 0.5s ease;

  &:hover {
    box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157),
      0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28),
      0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
  }

  .title {
    padding-left: 0.375em;
    font-size: 3.6em;
    font-family: Lato, sans-serif;
    font-weight: 200;
    letter-spacing: 0.75em;
    color: white;

    @media (max-width: 640px) {
      font-size: 2em;
    }
  }
}

23、mix-blend-mode

<video autoplay muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" />
  <source src="http://thenewcode.com/assets/videos/ocean-small.mp4" />
</video>
<h1>ocean</h1>

@font-face {
  font-family: Biko;
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/biko-black.woff");
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

video,
h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

video {
  object-fit: cover;
}

h1 {
  font-size: 20vw;
  font-family: Biko, sans-serif;
  font-weight: 700;
  line-height: 100vh;
  text-transform: uppercase;
  text-align: center;
  background: white;
  mix-blend-mode: screen;
}

24、clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思。

常用的css特效（一）

<div class="shadow">
  <div class="card">
    <div class="card-header">Contact</div>
    <div class="card-body">
      <dl>
        <span>
                <dt><a href="https://github.com/alphardex" target="_blank"><svg t="1580195147272" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="737" width="27" height="27"><path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z" p-id="738" fill="#4289ff"></path></svg></a></dt>
                <dd>alphardex</dd>
            </span>
        <span>
                <dt><a href="mailto:aaa@qq.com"><svg t="1580195271469" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9773" width="27" height="27"><path d="M1024.073143 405.723429l0 453.705143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-841.142857 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-453.705143q25.161143 28.013714 57.709714 49.737143 206.848 140.580571 284.013714 197.12 32.548571 23.990857 52.882286 37.449143t53.979429 27.428571 62.829714 13.970286l1.170286 0q29.110857 0 62.829714-13.970286t53.979429-27.428571 52.882286-37.449143q97.133714-70.290286 284.598857-197.12 32.548571-22.308571 57.124571-49.737143zM1024.073143 237.714286q0 45.129143-28.013714 86.308571t-69.705143 70.290286q-214.820571 149.138286-267.410286 185.709714-5.705143 4.022857-24.283429 17.408t-30.866286 21.723429-29.696 18.578286-32.841143 15.433143-28.598857 5.12l-1.170286 0q-13.165714 0-28.598857-5.12t-32.841143-15.433143-29.696-18.578286-30.866286-21.723429-24.283429-17.408q-52.004571-36.571429-149.723429-104.301714t-117.174857-81.408q-35.401143-23.990857-66.852571-65.974857t-31.451429-77.970286q0-44.544 23.698286-74.313143t67.730286-29.696l841.142857 0q37.156571 0 64.292571 26.843429t27.136 64.585143z" p-id="9774" fill="#4289ff"></path></svg></a></dt>
                <dd>aaa@qq.com</dd>
            </span>
        <span>
                <dt><a href="tel:+8613063509980"><svg t="1580195327065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10241" width="27" height="27"><path d="M914.285714 708.534857q0 15.433143-5.705143 40.301714t-11.995429 39.131429q-11.995429 28.598857-69.705143 60.562286-53.686857 29.110857-106.276571 29.110857-15.433143 0-29.988571-1.974857t-32.841143-7.168-27.136-8.265143-31.744-11.702857-28.013714-10.313143q-56.027429-19.968-99.986286-47.396571-73.142857-45.129143-151.113143-123.172571t-123.172571-151.113143q-27.428571-44.032-47.396571-99.986286-1.682286-5.12-10.313143-28.013714t-11.702857-31.744-8.265143-27.136-7.168-32.841143-1.974857-29.988571q0-52.589714 29.110857-106.276571 32.036571-57.709714 60.562286-69.705143 14.262857-6.290286 39.131429-11.995429t40.301714-5.705143q7.972571 0 11.995429 1.682286 10.313143 3.437714 30.281143 43.446857 6.290286 10.825143 17.115429 30.866286t19.968 36.278857 17.700571 30.573714q1.682286 2.267429 10.020571 14.262857t12.288 20.260571 4.022857 16.310857q0 11.410286-16.310857 28.598857t-35.401143 31.451429-35.401143 30.281143-16.310857 26.258286q0 5.12 2.852571 12.873143t4.827429 11.702857 7.972571 13.677714 6.582857 10.825143q43.446857 78.262857 99.401143 134.290286t134.290286 99.401143q1.170286 0.585143 10.825143 6.582857t13.677714 7.972571 11.702857 4.827429 12.873143 2.852571q10.313143 0 26.258286-16.310857t30.281143-35.401143 31.451429-35.401143 28.598857-16.310857q7.972571 0 16.310857 4.022857t20.260571 12.288 14.262857 10.020571q14.262857 8.557714 30.573714 17.700571t36.278857 19.968 30.866286 17.115429q40.009143 19.968 43.446857 30.281143 1.682286 4.022857 1.682286 11.995429z" p-id="10242" fill="#4289ff"></path></svg></a></dt>
                <dd>(+86)13063509980</dd>
            </span>
      </dl>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: Lato, sans-serif;
  background: #ECEFFC;
}

// box-shadow will be effected by clip-path, so use a wrapper + drop-shadow to make shadow.
.shadow {
  filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
}

.card {
  clip-path: inset(0 0 70% 0);
  transform: translateY(30%);
  transition: 0.5s ease;

  .card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 100px;
    font-size: 2em;
    color: white;
    background-color: #2979ff;
    clip-path: inset(0 19% 0 19%);
    transition: 0.5s ease;
  }

  .card-body {
    box-sizing: border-box;
    padding: 1.25em;
    width: 400px;
    height: 225px;
    font-size: 1.5em;
    background: white;
    clip-path: inset(0 19% 0 19%);
    transition: 0.5s ease;

    dl {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      margin: 0;
    }

    span {
      opacity: 0;
      transform: translateY(100%);
      transition: 0.5s ease-in;

      @for $i from 1 through 3 {
        &:nth-child(#{$i}) {
          transition-delay: $i * 0.1s;
        }
      }

      dt,
      dd {
        display: inline;
        margin: 0;

        svg {
          margin-right: 0.3em;
        }
      }
    }
  }

  &:hover {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);

    .card-header,
    .card-body {
      clip-path: inset(0 0 0 0);
    }

    span {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

27、彩蛋

<ul class="shinchou-menu">
  <li><a href="#">ニュース</a></li>
  <li><a href="#">ストーリー</a></li>
  <li><a href="#">スターフ＆キャスト</a></li>
  <li><a href="#">キャラクター</a></li>
  <li><a href="#">放送·配信情報</a></li>
</ul>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fafafa;
}

.shinchou-menu {
  --highlight-text-color: #00ACF0;
  display: flex;
  flex-direction: column;
  list-style-type: none;

  li {
    margin: 6px;

    a {
      position: relative;
      display: inline-flex;
      padding: 6px 2px 6px 2px;
      color: black;
      font-size: 1.6em;
      font-weight: 700;
      line-height: 1; // ensure span is a square
      text-decoration: none;
      overflow: hidden;

      &::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        background: black;
      }

      &:hover {
        span {
          color: white !important;
          text-shadow: 0 0 10px var(--highlight-text-color);
        }
      }

      span {
        position: relative;
        margin: 0 5px 0 4px;
        transition: 0.3s;

        &.highlight::before {
          position: absolute;
          content: '';
          top: -3px;
          left: -3px;
          bottom: -3px;
          right: -3px;
          z-index: -1;
          background: var(--highlight-text-color);
        }

        &:not(.highlight) {
          color: var(--highlight-text-color);
        }
      }
    }
  }
}

let shinchouMenuLinks = document.querySelectorAll(".shinchou-menu li a");
shinchouMenuLinks.forEach(link => {
  let letters = link.textContent.split("");
  link.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    if (i < 2) {
      span.className = "highlight";
    }
    span.style.transitionDelay = `${i / 10}s`;
    link.append(span);
  });
});

常用的css特效（一）

2、用JS分割文本

3、随机粒子动画

4、伪类

7、attr()生成文本内容

8、overflow障眼法

9、兄弟选择符定制表单元素

11、border-radius

12、box-shadow

15、发光文本

16、霓虹文本

17、伪3D文本

18、background-clip:text

19、linear-gradient

20、radial-gradient

21、conic-gradient

22、backdrop-filter

23、mix-blend-mode

24、clip-path

27、彩蛋

CSS第一次加载失效的问题_html/css_WEB-ITnose

css想自己引入一个字体，有点怕不同的浏览器不支持？

怎么让li的那个点靠近文字一点呢？_html/css_WEB-ITnose

php中一些常用的语句收集，php常用语句收集_PHP教程

怎么样在html点击某一行，会显示相应的数据，其中的金额要以千位分隔符显示_html/css_WEB-ITnose

如何让网页一次过展开树状里面全部的内容_html/css_WEB-ITnose

html中让 ul 的多个 li 在一行内显示_html/css_WEB-ITnose

DIV常用的居中方法_html/css_WEB-ITnose

html5标签css3的常用样式

在div中的img左侧总会出现一条竖线_html/css_WEB-ITnose

常用的css特效（一）

2、用JS分割文本

3、随机粒子动画

4、伪类

7、attr()生成文本内容

8、overflow障眼法

9、兄弟选择符定制表单元素

11、border-radius

12、box-shadow

15、发光文本

16、霓虹文本

17、伪3D文本

18、background-clip:text

19、linear-gradient

20、radial-gradient

21、conic-gradient

22、backdrop-filter

23、mix-blend-mode

24、clip-path

27、彩蛋

CSS第一次加载失效的问题_html/css_WEB-ITnose

css想自己引入一个字体，有点怕不同的浏览器不支持？

怎么让li的那个点靠近文字一点呢？_html/css_WEB-ITnose

php中一些常用的语句收集，php常用语句收集_PHP教程

怎么样在html点击某一行，会显示相应的数据，其中的金额要以千位分隔符显示_html/css_WEB-ITnose

如何让网页一次过展开树状里面全部的内容_html/css_WEB-ITnose

html中 让 ul 的多个 li 在一行内显示_html/css_WEB-ITnose

DIV常用的居中方法_html/css_WEB-ITnose

html5标签css3的常用样式

在div中的img左侧总会出现一条竖线_html/css_WEB-ITnose

html中让 ul 的多个 li 在一行内显示_html/css_WEB-ITnose