css+js实现挂在墙上的日历挂历点击撕开掉下动画效果代码-html代码-BFW代码库

css+js实现挂在墙上的日历挂历点击撕开掉下动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现挂在墙上的日历挂历点击撕开掉下动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        *,*::before,*::after {
    	box-sizing:border-box;
    }
    body {
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	height:100vh;
    	font-family:sans-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 0px #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:.........完整代码请登录后点击上方下载按钮下载查看