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);

js css3挂历撕掉动画特效相关推荐

css波纹波动效果,js+css3催眠波纹动画特效
js代码 function getRandomNumber() { return Math.floor(Math.random() * 255); } function getBrightness(r ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html5 3d引擎星空,HTML5特效库用three.js实现3d星空动画特效源码
效果图各位长友,大家上午好! 今天给大家带来的是用three.js实现3d星空动画特效源码大家可以按照自己的意愿进行修改,改成自己喜欢的模样! 若是有想文件版源码的可以进HTML5前端技术交流 ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
html5文章标题定格,jQuery和css3文章标题动画特效
这是一款效果非常不错的jQuery和css3文章标题动画特效. HTML结构所有效果的html结构是一样的,使用一个作为wrapper,给它一些margins和max-width.标题使用的是标签 ...
js+css3的卡牌抽奖特效动画
项目结构: index.html <!DOCTYPE html> <html lang="en"><head><meta charset= ...

js css3挂历撕掉动画特效

js css3挂历撕掉动画特效相关推荐

最新文章

热门文章