css3 日历翻页效果

CSS3 日历翻页效果

.calendar {
    position: relative;
    padding: 20px;
    margin: 50px auto;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    background-color: #FFF;
    overflow: hidden;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
}
.calendar-header .prev, .calendar-header .next {
    font-size: 18px;
    cursor: pointer;
}
.calendar-body {
    position: absolute;
    top: 30px;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
    transition: transform .5s ease-in-out;
}
.calendar-month {
    width: 33.33%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.calendar-month .day {
    width: calc(100% / 7);
    height: calc(100% / 6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.calendar-month .day span {
    font-size: 18px;
    cursor: pointer;
}
.calendar-prev {
    transform: translateX(-100%);
}
.calendar-current {
    transform: translateX(0);
}
.calendar-next {
    transform: translateX(100%);
}
    

CSS代码中，主要分为三部分：日历容器、日历头部和日历本体。日历容器设置了宽高、边框圆角和背景颜色，并且设定为相对定位，这是为了日历头部的绝对定位铺垫，也为了日历头部和日历本体的相对定位。日历头部就是包含了前后翻页按钮的一个容器，按钮的样式可以根据需要自由发挥。日历本体分为三个月份，每个月份的区域宽度为总宽度的三分之一。月份区域内采用flex布局，每个日期单元格自动均分剩余空间。最后根据前后月份的显示状态，通过设置transform属性达到翻页的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！