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

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

代码语言：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);
}

.book.........完整代码请登录后点击上方下载按钮下载查看