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:10p.........完整代码请登录后点击上方下载按钮下载查看