cover

好用的css特效

一些好用的css样式设计

木易兴兴

3085人浏览 · 2021-12-17 15:27:04

木易兴兴 · 2021-12-17 15:27:04 发布

好用的css特效

1.圆点动画

效果如下：

在这里插入图片描述

查看代码：

<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 {
    display: flex;
}

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

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

.loading .dot:nth-child(1) {
    background: #7ef9ff;
}

.loading .dot:nth-child(1)::before {
    animation-delay: 0.2s;
}

.loading .dot:nth-child(2) {
    background: #89cff0;
}

.loading .dot:nth-child(2)::before {
    animation-delay: 0.4s;
}

.loading .dot:nth-child(3) {
    background: #4682b4;
}

.loading .dot:nth-child(3)::before {
    animation-delay: 0.6s;
}

.loading .dot:nth-child(4) {
    background: #0f52ba;
}

.loading .dot:nth-child(4)::before {
    animation-delay: 0.8s;
}

.loading .dot:nth-child(5) {
    background: #000080;
}

.loading .dot:nth-child(5)::before {
    animation-delay: 1s;
}

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

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;
}
.landIn span {
  animation: landIn 0.8s ease-out both;
}

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

"use strict";
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);
    });
});

3.飘雪动画

效果如下：

在这里插入图片描述

注：雪花数量取决于你的snow块数量；

查看代码


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

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;
}
.btn:hover {
  background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
  --hue: 171;
}
.btn-ghost {
  color: hsl(var(--hue), 100%, 41%);
  background-color: transparent;
  border-color: hsl(var(--hue), 100%, 41%);
}
.btn-ghost:hover {
  color: white;
}
.btn-border-stroke {
  border-color: hsla(var(--hue), 100%, 41%, 0.35);
}
.btn-border-stroke .btn-borders {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn-border-stroke .btn-borders .border-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleX(0);
  transform-origin: left;
}
.btn-border-stroke .btn-borders .border-right {
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleX(0);
  transform-origin: left;
}
.btn-border-stroke .btn-borders .border-left {
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-left {
  transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke .btn-borders .border-bottom {
  transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke .btn-borders .border-right {
  transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke .btn-borders .border-top {
  transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover {
  color: hsl(var(--hue), 100%, 41%);
  background: transparent;
}
.btn-border-stroke:hover .border-top,
.btn-border-stroke:hover .border-bottom {
  transform: scaleX(1);
}
.btn-border-stroke:hover .border-left,
.btn-border-stroke:hover .border-right {
  transform: scaleY(1);
}
.btn-border-stroke:hover .border-left {
  transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover .border-bottom {
  transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover .border-right {
  transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke:hover .border-top {
  transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-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;
}
.btn-text-float-up .btn-text {
  display: block;
  transition: 0.75s 0.1s var(--ease-out-exponential);
}
.btn-text-float-up:hover .btn-text {
  opacity: 0;
  transform: translateY(-25%);
  transition: 0.25s ease-out;
}
.btn-text-float-up:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition: 0.75s 0.1s var(--ease-out-exponential);
}

5.绝对定位实现多重边框

效果如下：
在这里插入图片描述

查看代码

<button class="btn btn-primary btn-ghost btn-multiple-border-stroke">
  <div class="btn-borders-group">
    <div class="border-top"></div>
    <div class="border-right"></div>
    <div class="border-bottom"></div>
    <div class="border-left"></div>
  </div>
  <div class="btn-borders-group">
    <div class="border-top"></div>
    <div class="border-right"></div>
    <div class="border-bottom"></div>
    <div class="border-left"></div>
  </div>
  <div class="btn-borders-group">
    <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-out-duration: 0.65s;
  --ease-out-delay: var(--ease-in-duration);
  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;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;
}
.btn:hover {
  background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
  --hue: 171;
}
.btn-ghost {
  color: hsl(var(--hue), 100%, 41%);
  background-color: transparent;
  border-color: hsl(var(--hue), 100%, 41%);
}
.btn-ghost:hover {
  color: white;
}
.btn-multiple-border-stroke {
  border-color: transparent;
}
.btn-multiple-border-stroke .btn-borders-group {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid hsla(var(--hue), 100%, 41%, 0.35);
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(1) {
  left: -8px;
  padding: 0 8px;
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(2) {
  top: -8px;
  padding: 8px 0;
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(3) {
  top: -4px;
  left: -4px;
  padding: 4px;
}
.btn-multiple-border-stroke .btn-borders-group .border-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleX(0);
  transform-origin: left;
}
.btn-multiple-border-stroke .btn-borders-group .border-right {
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-multiple-border-stroke .btn-borders-group .border-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleX(0);
  transform-origin: left;
}
.btn-multiple-border-stroke .btn-borders-group .border-left {
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background: hsl(var(--hue), 100%, 41%);
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-multiple-border-stroke .btn-borders-group .border-left {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke .btn-borders-group .border-bottom {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke .btn-borders-group .border-right {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke .btn-borders-group .border-top {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover {
  color: hsl(var(--hue), 100%, 41%);
  background: transparent;
}
.btn-multiple-border-stroke:hover .border-top,
.btn-multiple-border-stroke:hover .border-bottom {
  transform: scaleX(1);
}
.btn-multiple-border-stroke:hover .border-left,
.btn-multiple-border-stroke:hover .border-right {
  transform: scaleY(1);
}
.btn-multiple-border-stroke:hover .border-left {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover .border-bottom {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover .border-right {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke:hover .border-top {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}

6.带幻灯片条的标题

效果如下：

在这里插入图片描述
页面跳转

查看代码

<header>
  <h1 class="title slide-bar">I'm alphardex.</h1>
  <p class="subtitle slide-bar">A CSS Wizard</p>
</header>

@import url("https://fonts.googleapis.com/css?family=Lato");
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}

.slide-bar {
  position: relative;
  color: transparent;
  animation: fill-text-white 2s 1.6s forwards;
}
.slide-bar::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #35b9f1;
  transform: scaleX(0);
  transform-origin: left;
  animation: slide-in-out 2s cubic-bezier(0.75, 0, 0, 1) forwards;
}

@keyframes slide-in-out {
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
@keyframes fill-text-white {
  to {
    color: white;
  }
}
header .title,
header .subtitle {
  width: 250px;
  height: 30px;
}
header .title {
  margin: 0;
  font-family: Lora, serif;
  font-size: 32px;
  line-height: 30px;
}
header .title::before {
  background: #FF4081;
}
header .subtitle {
  margin: 10px 0 0 0;
  font-family: Lato, sans-serif;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 5px;
  text-transform: uppercase;
  animation-delay: 3.2s;
}
header .subtitle::before {
  background: #03A9F4;
  animation-delay: 2s;
}

7.交错浮动文本菜单

效果如下：

在这里插入图片描述

查看代码

<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;
}
.float-text-menu li a {
  display: flex;
  padding: 6px;
  color: white;
  font-family: Lato, sans-serif;
  text-decoration: none;
  overflow: hidden;
}
.float-text-menu li a span {
  position: relative;
  transition: 0.3s;
}
.float-text-menu li a span::before {
  position: absolute;
  content: attr(data-text);
  transform: translateY(130%);
}
.float-text-menu li a:hover span {
  transform: translateY(-130%);
}

"use strict";
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. 按钮悬停闪烁

效果如下：

在这里插入图片描述

查看代码

<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;
}
.btn:hover {
  background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
  --hue: 187;
}
.btn-ghost {
  color: hsl(var(--hue), 100%, 41%);
  background-color: transparent;
  border-color: hsl(var(--hue), 100%, 41%);
}
.btn-ghost:hover {
  color: white;
}
.btn-shine {
  color: white;
}
.btn-shine::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;
}
.btn-shine:hover {
  background: transparent;
  box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
}
.btn-shine:hover::before {
  transform: translateX(100%);
}

9. TODO List

效果如下：

在这里插入图片描述
页面跳转

查看代码

<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>

@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 .todo-list__title {
  padding: 3px 6px;
  color: #f1faee;
  background-color: #264456;
}
.todo-list .todo-list__label {
  display: flex;
  align-items: center;
  margin: 40px 0;
  font-size: 24px;
  font-family: Lato, sans-serif;
  color: #f1faee;
  cursor: pointer;
}
.todo-list .todo-list__label input[type=checkbox] {
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.todo-list .todo-list__label input[type=checkbox] + .check {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #f1faee;
  transition: 0.2s;
}
.todo-list .todo-list__label input[type=checkbox]:checked + .check {
  width: 25px;
  height: 15px;
  border-top: transparent;
  border-right: transparent;
  transform: rotate(-45deg);
}
.todo-list .todo-list__label input[type=checkbox] ~ span {
  position: relative;
  left: 40px;
  white-space: nowrap;
  transition: 0.5s;
}
.todo-list .todo-list__label input[type=checkbox] ~ span::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1faee;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span {
  color: #585b57;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span::before {
  transform: scaleX(1);
  transform-origin: left;
}

10. 分页选择器

效果如下：

在这里插入图片描述

查看代码

<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;
}
.pagination li {
  margin: 0 5px;
}
.pagination li.page-number {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.pagination li.page-number:hover a {
  color: white;
  background: #777;
}
.pagination li.page-number.active a {
  color: white;
  background: #333;
}
.pagination li.page-prev, .pagination li.page-next {
  font-weight: 700;
}
.pagination li.page-prev {
  margin-right: 20px;
}
.pagination li.page-next {
  margin-left: 20px;
}
.pagination li a {
  display: block;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: #777;
  border-radius: 50%;
  transition: 0.3s;
}
.pagination li a.prev:hover path, .pagination li a.next:hover path {
  fill: black;
}

"use strict";
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.style.setProperty("--active-index", `${activeIndex}`);
    });
});
prevLink.addEventListener("click", () => {
    pageNumberLinks.forEach(pageNumberLink => pageNumberLink.parentElement.classList.remove("active"));
    let activeIndex = Number(pagination.style.getPropertyValue("--active-index"));
    activeIndex = activeIndex > 0 ? activeIndex - 1 : 0;
    pageNumberLinks[activeIndex].parentElement.classList.add("active");
    pagination.style.setProperty("--active-index", `${activeIndex}`);
});
nextLink.addEventListener("click", () => {
    pageNumberLinks.forEach(pageNumberLink => pageNumberLink.parentElement.classList.remove("active"));
    let activeIndex = Number(pagination.style.getPropertyValue("--active-index"));
    activeIndex = activeIndex < maxPageIndex ? activeIndex + 1 : maxPageIndex;
    pageNumberLinks[activeIndex].parentElement.classList.add("active");
    pagination.style.setProperty("--active-index", `${activeIndex}`);
});

11. 遮罩

效果如下：

在这里插入图片描述

查看代码

<input type="checkbox" id="burger-toggle">
<label for="burger-toggle" class="burger-menu">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</label>
<div class="overlay"></div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #ECEFFC;
}

#burger-toggle {
  appearance: none;
  opacity: 0;
}
#burger-toggle:checked ~ .overlay {
  opacity: 1;
  transform: scale(160);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(1) {
  transform: translateY(calc(var(--burger-menu-radius) / 5)) rotate(45deg);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(2) {
  transform: scaleX(0);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(3) {
  transform: translateY(calc(var(--burger-menu-radius) / -5)) rotate(-45deg);
}

.burger-menu {
  --burger-menu-radius: 4em;
  position: relative;
  z-index: 100;
  display: block;
  width: var(--burger-menu-radius);
  height: var(--burger-menu-radius);
  background: white;
  border: solid 2px rgba(149, 166, 167, 0.4);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.burger-menu .line {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 3px;
  background: rgba(43, 61, 79, 0.3);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s ease;
}
.burger-menu .line:nth-child(1) {
  top: 30%;
}
.burger-menu .line:nth-child(2) {
  top: 50%;
}
.burger-menu .line:nth-child(3) {
  top: 70%;
}
.burger-menu .line::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2980b9;
  transform: translateX(-100%);
  transition: all 0.25s ease;
}
.burger-menu .line:nth-child(2)::after {
  transition-delay: 0.1s;
}
.burger-menu .line:nth-child(3)::after {
  transition-delay: 0.2s;
}
.burger-menu:hover {
  box-shadow: 0.4px 0.4px 0.8px rgba(0, 0, 0, 0.042), 1px 1px 2px rgba(0, 0, 0, 0.061), 1.9px 1.9px 3.8px rgba(0, 0, 0, 0.075), 3.4px 3.4px 6.7px rgba(0, 0, 0, 0.089), 6.3px 6.3px 12.5px rgba(0, 0, 0, 0.108), 15px 15px 30px rgba(0, 0, 0, 0.15);
}
.burger-menu:hover .line::after {
  transform: translateX(0);
}

.overlay {
  position: absolute;
  width: 2em;
  height: 2em;
  background: rgba(40, 127, 184, 0.9);
  border-radius: 50%;
  opacity: 0;
  transition: 0.5s ease-in-out;
  will-change: transform;
}

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

cover

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

木易兴兴

已为社区贡献2条内容