svg+css实现立体书签checkbox点击开关效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现立体书签checkbox点击开关效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@property --fade-out {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: true;
}
@property --pulse {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --pulse2 {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --copacity {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
.container {
  --w: 25vmin;
  --h: 40vmin;
  --gi: 1vmin;
  --gih: calc(var(--gi) / 2);
  --gihn: calc(var(--gi) / -2);
}

.bookmark-inside {
  width: calc(var(--w) - var(--gi));
  height: calc(var(--h) - var(--gi));
  background: #b5bbc8;
  position: absolute;
  right: calc(20vmin + var(--gih));
  top: calc(20vmin + var(--gih));
  border-radius: 3vmin 3vmin 0 0;
  box-shadow: inset -1vmin 1vmin 3vmin var(--inner-shadow, transparent), inset 0.5vmin 0 0.1vmin rgba(255, 255, 255, 0.3), inset -0.5vmin 0.1vmin 0vmin rgba(255, 255, 255, 0.3), inset 0.4vmin 0 0.05vmin rgba(0, 0, 0, 0.3), inset -0.4vmin 0 0.05vmin rgba(0, 0, 0, 0.3), inset 0vmin 0 1vmin rgba(0, 0, 0, 0.1);
  -webkit-mask: url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
          mask: url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  transition: all 0.3s ease;
}
.bookmark-inside:after {
  border-radius: 0.5rem;
  content: "";
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.5;
  translate: 0 73%;
  box-shadow: -0.5vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.4), 0.1vmin -0.1vmin 0.7vmin rgba(0, 0, 0, 0.5);
  bottom: 0;
  right: 0;
  left: 0;
  rotate: 45deg;
}

.bookmark {
  width: var(--w);
  height: var(--h);
  opacity: 0.9;
  background: conic-gradient(rgba(0, 0, 0, var(--c-bg-alpha, 0.2)), rgba(0, 0, 0, var(--c-bg-alpha, 0)), rgba(0, 0, 0, var(--c-bg-alpha, 0.2))), #b4bac7;
  position: absolute;
  right: 20vmin;
  top: 20vmin;
  border-radius: 3vmin 3vmin 0 0;
  box-shadow: inset 0.2vmin -0.1vmin 0.09vmin rgba(255, 255, 255, 0.6), inset 0.9vmin 0 0.9vmin rgba(0, 0, 0, 0.3), inset -0.2vmin 0 0.3vmin rgba(0, 0, 0, 0.3);
  -webkit-mask: url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v5") center bottom no-repeat;
          mask: url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v5") center bottom no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
}
.bookmark:after {
  border-radius: 0.5rem;
  content: "";
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.5;
  translate: 0 73%;
  box-shadow: 0 0 0.6vmin black, -0.1vmin 0.1vmin 0.7vmin rgba(0, 0, 0, 0.5), 0.1vmin -0.1vmin 0.7vmin rgba(0, 0, 0, 0.5);
  bottom: 0;
  right: 0;
  left: 0;
  rotate: 45deg;
  transform: scale5(1.4);
}

.bookmark-top {
  width: calc(var(--w));
  height: calc(var(--h));
  padding: 0.1vmin;
  border-top: 0.4vmin solid rgba(255, 255, 255, 0.5);
  background: radial-gradient(120% 16% at 50% calc(90% + var(--pulse2)), rgba(255 255 255/var(--copacity, 0%)), transparent), radial-gradient(120% 10% at 50% calc(22% + var(--fade-out) + var(--pulse)), rgba(255, 255, 255, 0.8), transparent), linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 10%, rgba(0, 0, 0, 0.1)) padding-box, linear-gradient(#15adf3 calc(0% + var(--fade-out) + var(--pulse)), #36c6ff calc(20% + var(--fade-out) + var(--pulse)), #171da2 calc(40% + var(--fade-out) + var(--pulse)), #0077ff) content-box, #0032ff;
  position: absolute;
  right: 20vmin;
  top: 20vmin;
  border-radius: 3vmin 3vmin 0 0;
  -webkit-mask: linear-gradient(to bottom, transparent var(--fade-out), black calc(var(--fade-out) + 10%)), url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
          mask: linear-gradient(to bottom, transparent var(--fade-out), black calc(var(--fade-out) + 10%)), url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  transition: all 0.3s ease;
  box-shadow: inset 0.5vmin 0 0.1vmin rgba(0, 0, 0, 0.3), inset -0.3vmin 0 0.1vmin rgba(255, 255, 255, 0.8);
}
.bookmark-top:before {
  content: "";
  position: absolute;
  background: #050505;
  opacity: 0.19;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  mix-blend-mode: overlay;
  transform: scaleY(62) scaleX(4);
  filter: url(#noise);
}
.bookmark-top:after {
  border-radius: 0.5rem;
  content: "r";
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.5;
  translate: 0 73%;
  box-shadow: -0.5vmin -0.4vmin 0vmin rgba(255, 255, 255, 0.5), 0.5vmin -0.8vmin 0.4vmin rgba(0, 0, 0, 0.9);
  bottom: 0;
  right: 0;
  left: 0;
  rotate: 45deg;
}

.bookmark-top-inner {
  --inner-p: 4vmin;
  width: calc(var(--w) - var(--inner-p));
  height: calc(var(--h) - var(--inner-p));
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.1) 0.02vmin, rgba(255, 255, 255, 0.03) 0.02vmin, transparent 0.05vmin), rgba(0, 0, 0, 0.01);
  -webkit-backdrop-filter: blur(1.5rem) brightness(1.1) contrast(1.1);
          backdrop-filter: blur(1.5rem) brightness(1.1) contrast(1.1);
  position: absolute;
  right: calc(20vmin + var(--inner-p) / 2);
  top: calc(20vmin);
  border-radius: 1vmin;
  -webkit-mask: linear-gradient(to bottom, transparent 1vmin, black 12%, transparent, black), url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
          mask: linear-gradient(to bottom, transparent 1vmin, black 12%, transparent, black), url("//repo.bfw.wiki/bfwrepo/svg/bookmark/bookmark.svg?v4") center var(--gihn) no-repeat;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  -webkit-mask-size: cover;
 .........完整代码请登录后点击上方下载按钮下载查看