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 rgb.........完整代码请登录后点击上方下载按钮下载查看