js css3挂历撕掉动画特效

js基于css3属性制作挂历日历本，默认获取当前日期和星期，通过鼠标点击日历本挂历掉落动画特效。 这是古董挂历哈哈哈好久没见过了，喜欢的一定要试哦~

html代码

<div class="calendar">
    <div class="pages"></div>
</div>

css代码

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Zilla Slab', serif;
    background: #577386;
    overflow: hidden;
}
p {
    margin: 0 0 3px;
    line-height: 1;
    letter-spacing: 1px;
    pointer-events: none;
}
.calendar {
    position: relative;
    width: 152px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.calendar::before,
.calendar::after {
    content: '';
    position: absolute;
    top: -28px;
    left: 40px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #ddd;
    z-index: 3;
}
.calendar::after {
    left: initial;
    right: 40px;
}
.pages {
    position: relative;
    text-align: center;
    background: #eee;
    box-shadow: 0 10px 0 0 #a5a4a4;
}
.pages::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 45px;
    background: indianred;
    bottom: 100%;
    left: 0;
    z-index: 2;
}
.page {
    position: relative;
    padding: 20px 30px 15px;
    background: #eee;
}
.page::before {
    content: '';
    position: absolute;
    bottom: 99%;
    left: 0;
    display: block;
    background: linear-gradient(-45deg, #eee 10px, #eee 10px, #eee 10px, transparent 0), linear-gradient(45deg, #eee 10px, transparent 0);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 10px 18px;
    height: 10px;
    width: 100%;
}
.month,
.day-name {
    text-transform: uppercase;
    font-weight: 600;
}
.day {
    font-size: 60px;
    font-weight: 700;
    margin: 0 0 15px;
}
.year {
    font-size: 12px;
}
.tear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    -webkit-animation: tear-animation 0.8s linear forwards;
    animation: tear-animation 0.8s linear forwards;
}
@-webkit-keyframes tear-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        top: 0;
        opacity: 1;
    }
    20% {
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg);
        top: 0;
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        top: 200px;
        opacity: 0;
    }
}
@keyframes tear-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        top: 0;
        opacity: 1;
    }
    20% {
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg);
        top: 0;
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        top: 200px;
        opacity: 0;
    }
}

js代码

var pages = document.querySelector('.pages');
var locale = window.navigator.language || 'en-us';

var date = new Date();
var dayNum = date.getDate();
var month = date.getMonth();
var dayName = date.toLocaleString(locale, { weekday: 'long' });
var monthName = date.toLocaleString(locale, { month: 'long' });
var year = date.getFullYear();

function daysInMonth(month, year) {
  return new Date(year, month + 1, 0).getDate();
}

function getNewDate() {
  if (dayNum < daysInMonth(month, year)) {
    dayNum++;
  } else {
    dayNum = 1;
  }
  if (dayNum === 1 && month < 11) {
    month++;
  } else if (dayNum === 1 && month === 11) {
    month = 0;
  }
  if (dayNum === 1 && month === 0) {
    year++;
  }
  var newDate = new Date(year, month, dayNum);
  dayName = newDate.toLocaleString('en-us', { weekday: 'long' });
  monthName = newDate.toLocaleString('en-us', { month: 'long' });
}

function handleClick(e) {
  getNewDate();
  updateCalendar(e.target);
}

function updateCalendar(target) {
  if (target && target.classList.contains('page')) {
    target.classList.add('tear');
    setTimeout(function () {
      pages.removeChild(target);
    }, 800);
  } else {
    return;
  }
  renderPage();
}

function renderPage() {
  var newPage = document.createElement('div');
  newPage.classList.add('page');
  newPage.innerHTML = '\n    <p class="month">' +
  monthName + '</p>\n    <p class="day">' +
  dayNum + '</p>\n    <p class="day-name">' +
  dayName + '</p>\n    <p class="year">' +
  year + '</p>\n  ';

  pages.appendChild(newPage);
}

renderPage();

pages.addEventListener('click', handleClick);