js+css实现可以掉落撕下的日历动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现可以掉落撕下的日历动画效果代码，点击右上角按钮试试效果。

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


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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");

:root {
  --border-radius: 0.125rem;
  --calendar-offset: 2rem;
  --width: 18.75rem;
  --height: 25rem;

  --color-paper-dark: #fff19f;
  --color-paper-darker: #ffed87;
  --color-paper-light: #fffadb;
  --color-text: #000; /* todo change */
  --color-weekend: #d00; /* todo change */
  --color-bg: #1b2531;

  --font-size: clamp(1rem, calc(1rem + 1vw), 2rem);
  --font-family: "Lora", serif;
  --font-text: bold var(--font-size) / 1 var(--font-family);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar {
  border-radius: var(--border-radius);
  width: var(--width);
  height: var(--height);
  background-color: brown;
  position: relative;
}

.calendar__scraps {
  position: absolute;
  top: calc(var(--calendar-offset) / 2);
  left: calc(var(--calendar-offset) / 2);
  background-color: var(--color-paper-dark);
  height: 2.5rem;
  width: calc(100% - var(--calendar-offset));
  clip-path: url(#scrap-leaf-path);
  transform: scale(-1);
  z-index: 6;
}
.calendar__scraps--1 {
  background-color: rgba(0, 0, 0, 0.25);
  top: calc(var(--calendar-offset) / 2 + 1px);
  z-index: 5;
}
.calendar__scraps--2 {
  background-color: var(--color-paper-darker);
  top: calc(var(--calendar-offset) / 2 + 2px);
  transform: scaleY(-1);
  z-index: 4;
}
.calendar__scraps--3 {
  background-color: rgba(0, 0, 0, 0.25);
  top: calc(var(--calendar-offset) / 2 + 3px);
  transform: scaleY(-1);
  z-index: 3;
}
.calendar__scraps--4 {
  background-color: var(--color-paper-darker);
  top: calc(var(--calendar-offset) / 2 + 4px);
  z-index: 2;
}
.calendar__scraps--5 {
  background-color: rgba(0, 0, 0, 0.25);
  top: calc(var(--calendar-offset) / 2 + 5px);
  z-index: 1;
}
.calendar__assist {
  position: absolute;
  bottom: -2rem;
  color: #fff;
  font: bold 1rem/1 Arial, Helvetica, sans-serif;
  text-align: center;
  width: 100%;
  opacity: 0;
  animation: blink 0.54s ease-in-out 7 1s alternate;
}
.calendar__peg {
  position: absolute;
  width: 100%;
  height: 3rem;
  top: -3rem;
  z-index: -1;
}
.calendar__peg-nail {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  left: 50%;
  transform: translate(-50%);
  background-color: #aaa9ad;
  border-radius: 50%;
}
.calendar__peg-rope {
  position: absolute;
  top: 0.6rem;
  width: 50%;
  height: 0.3rem;
  background-color: #5b342e;
  transform-origin: center right;
  transform: rotate(-20deg);
}
.calendar__peg-rope--2 {
  right: 0;
  transform-origin: center left;
  transform: rotate(20deg);
}

.calendar__reset {
  unset: all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  color: #732222;
  font: bold 4rem/1 Georgia, serif;
  font-style: italic;
  text-shadow: 0.0625rem 0.0625rem 0.0625rem #b34747;
  cursor: pointer;
  z-index: 1;
}
.calendar__reset:hover {
  color: #fc0;
}

.leaf {
  border-radius: var(--border-radius);
  position: absolute;
  top: 0;
  left: 0;
  margin: 1rem;
  width: calc(100% - var(--calendar-offset));
  height: calc(100% - var(--calendar-offset));
  user-select: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0.1875rem 0.1875rem 0.25rem rgba(0, 0, 0, 0.45);
  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out 0.1s;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  transform: rotate(var(--rot));
  z-index: 2;
}
.leaf:focus-visible {
  /* outline: .0625rem dotted gray; */
  outline: none;
}
.leaf__main {
  background-image: linear-gradient(
    155deg,
    var(--color-paper-dark),
    80%,
    var(--color-paper-light)
  );
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: inset 2rem 0rem 7rem rgba(0, 0, 0, 0.02);
}

.leaf__scrap {
  height: 2.5rem;
  background-color: var(--color-paper-dark);
  transform: translateY(0.0625rem);
}
.leaf.-teared {
  transform: translate(var(--xdir), var(--ydir)) rotate(var(--rdir));
  box-shadow: 5rem 5rem 1rem rgba(0, 0, 0, 0.55);
}
.leaf.-teared > .leaf__scrap {
  clip-path: url(#scrap-leaf-path);
  transform: translateY(0.0625rem);
}

.leaf__year {
  font: var(--font-text);
  margin: 1rem 0 0;
}
.leaf__month {
  font: var(--font-text);
  margin: 0.1rem 0 0;
}
.leaf__day {
  --font-size: clamp(6rem, calc(6rem + 16vw), 12rem);
  --font-text: normal var(--font-size) / 1 var(--font-family);
  font: var(--font-text);
}
.leaf__weekday {
  font: var(--font-text);
}
.-weekend .leaf__day,
.-weekend .leaf__weekday {
  color: var(--color-weekend);
}

/* Modifiers */
.-bevel {
  box-shadow: inset 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3),
    inset -0.1rem -0.1rem 0.1rem 0 rgba(0, 0, 0, 0.5),
    0.4375rem 0.4375rem 0.75rem rgba(0, 0, 0, 0.55);
}

.-hidden {
  display: none;
}

.-removed-from-viewport {
  position: absolute;
  top: -1000rem;
}

#tear-all {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

@keyframes blink {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
</style>


</head>

<body >
  <div class="wrap">
  <div class="calendar -bevel" id="calendar">
    <button type="button" id="reset" class="calendar__reset">Reset</button>
    <div class="calendar__scraps" hidden></div>
    <div class="calendar__scraps calendar__scraps--1" hidden></div>
    <div class="calendar__scraps calendar__scraps--2" hidden></div>
    <div class="calendar__scraps calendar__scraps--3" hidden></div>
    <div class="calendar__scraps calendar__scraps--4" hidden></div>
    <div class="calendar__scraps calendar__scraps--5" hidden></div>
    <div class="calendar__scraps-shadow"></div>
    <div class="calendar__assist">Click or use keyboard</div>
    <div class="calendar__peg">
      <div class="calendar__peg-rope -bevel"></div>
      <div class="calendar__peg-rope calendar__peg-rope--2 -bevel"></div>
      <div class="calendar__peg-nail -bevel"></div>
    </div>
  </div>
  <button type="button" id="tear-all">Tear all</button> <!-- for fun! -->
</div>
<template id="calendar-sheet-tpl">
  <time class="leaf">
    <div class="leaf__scrap"></div>
    <div class="leaf__main">
      <h2 class="leaf__year"></h2>
      <h3 class="leaf__month"></h3>
      <div class="leaf__day"></div>
      <div class="leaf__weekday"></div>
    </div>
    <div class="decor">
      <div></div>
      <div></div>
    </div>
    </div>
</template>

<svg version="1.1" class="-removed-from-viewport">
  <defs>
    <clipPath id="scrap-leaf-path">
      <path id="path" transfor.........完整代码请登录后点击上方下载按钮下载查看