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

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

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