好用的css特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:32536

css3 前端 css
{}
一些好用的css样式设计

目录

好用的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.文本渐进显示

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

查看代码：


Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.


@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.飘雪动画

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

<a href="https://codepen.io/alphardex/pen/dyPorwJ">页面跳转</a>

注：雪花数量取决于你的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;

   &amp;: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.按钮悬停边框描边

效果如下： 在这里插入图片描述 <a href="https://codepen.io/alphardex/pen/pooYKVa">页面跳转</a>

查看代码

<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>
  Start
</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.绝对定位实现多重边框

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

<a href="https://codepen.io/alphardex/pen/ZEYXomW">页面跳转</a>

查看代码

<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>
  Start
</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.带幻灯片条的标题

效果如下： 在这里插入图片描述 <a href="https://codepen.io/alphardex/pen/jOEOEzZ">页面跳转</a>

查看代码

<header>
  
# I'm alphardex.

  
A CSS Wizard

</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.交错浮动文本菜单

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

<a href="https://codepen.io/alphardex/pen/wvBeXjd">页面跳转</a>

查看代码


  <a href="#" data-text="Home">Home</a>  <a href="#" data-text="Archives">Archives</a>  <a href="#" data-text="Tags">Tags</a>  <a href="#" data-text="Categories">Categories</a>  <a href="#" data-text="About">About</a>

@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. 按钮悬停闪烁

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

<a href="https://codepen.io/alphardex/pen/eYYzXBZ">页面跳转</a>

查看代码

<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

效果如下： 在这里插入图片描述 <a href="https://codepen.io/alphardex/pen/rNNPQwa">页面跳转</a>

查看代码

<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>
     Make awesome CSS animation
   </label>
   <label class="todo-list__label">
     <input type="checkbox" name="" id="" />
     <i class="check"></i>
     Watch awesome bangumi
   </label>
   <label class="todo-list__label">
     <input type="checkbox" name="" id="" />
     <i class="check"></i>
     Encounter awesome people
   </label>
   <label class="todo-list__label">
     <input type="checkbox" name="" id="" />
     <i class="check"></i>
     Be an awesome man
   </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. 分页选择器

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

<a href="https://codepen.io/alphardex/pen/QWwwwpp">页面跳转</a>

查看代码


  
   <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></svg></a>
   <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a href="#">5</a>  <a href="#">6</a>  
   <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></svg></a>
  


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. 遮罩

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

<a href="https://codepen.io/alphardex/pen/BaaKvVZ">页面跳转</a>

查看代码

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

原文地址：https://blog.csdn.net/qq_56992860/article/details/121997178?ops_request_misc=&request_id=06f15b4d02774e9598f5645ef55394ad&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-8-121997178-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/c30d12a93c4b48b1b987683604a1d17c

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复