js实现一个炫酷切换月份旋转日历效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个炫酷切换月份旋转日历效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; color: #444; background-color: #98c2c2; font: 300 18px/18px Roboto, sans-serif; transition: background .4s ease-in-out 0s; } *,:after,:before { box-sizing: border-box } .pull-left { float: left } .pull-right { float: right } .clearfix:after,.clearfix:before { content: ''; display: table } .clearfix:after { clear: both; display: block } .calendar { width: 300px; font-size: 100%; margin: 50px auto 0; -webkit-perspective: 1000px; perspective: 1000px; cursor: default; position: relative } .calendar .header { height: 100px; position: relative; color: #fff } .calendar .header .text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #308ff0; padding: 15px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: .4s ease-in-out 0s; box-shadow: 0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.2); opacity: 0 } .calendar .header .text>span { text-align: center; padding: 26px; display: block } .calendar .header.active .text { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1 } .months { width: 100%; height: 280px; position: relative } .months .hr { height: 1px; margin: 15px 0; background: #ccc } .month { padding: 15px; width: inherit; height: inherit; background: #fff; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all .4s ease-in-out 0s; box-shadow: 0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2) } .months[data-flow="left"] .month { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg) } .months[data-flow="right"] .month { -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } .table { width: 100%; font-size: 10px; font-weight: 400; display: table } .table .row { display: table-row } .table .row.head { color: #308ff0; text-transform: uppercase } .table .row .cell { width: 14.28%; padding: 5px; text-align: center; display: table-cell } .table .row .cell.disable { color: #ccc } .table .row .cell span { display: block; width: 28px; height: 28px; line-height: 28px; transition: color,background .4s ease-in-out 0s } .table .row .cell.active span { color: #fff; background-color: #308ff0 } .months .month[data-active="true"] { -webkit-transform: rotateY(0); transform: rotateY(0) } .header [data-action] { color: inherit; position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; z-index: 1; opacity: 0; transition: all .4s ease-in-out 0s } .header [data-action]>i { width: 20px; height: 20px; display: block; position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px } .header [data-action]>i:before,.header [data-action]>i:after { top: 50%; margin-top: -1px; content: ''; position: absolute; height: 2px; width: 20px; border-top: 2px solid; border-radius: 2px } .header [data-action*="prev"] { left: 15px } .header [data-action*="next"] { right: 15px } .header [data-action*="prev"]>i:before,.header [data-action*="prev"]>i:after { left: 0 } .header [data-action*="prev"]>i:before { top: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .header [data-action*="prev"]>i:after { top: auto; bottom: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .header [data-action*="next"]>i:before,.header [data-action*="next"]>i:after { right: 0 } .header [data-action*="next"]>i:before { top: auto; bottom: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .header [data-action*="next"]>i:after { top: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .header.active [data-action] { opacity: 1 } [data-theme="jan"] { background-color: #90CAF9 } [data-theme="jan"] .row.head { color: #1E88E5 } [data-theme="jan"] .header .text, [data-theme="jan"] .table .row .cell.active span { background-color: #1E88E5 } [data-theme="feb"] { background-color: #81D4FA } [data-theme="feb"] .row.head { color: #039BE5 } [data-theme="feb"] .header .text, [data-theme="feb"] .table .row .cell.active span { background-color: #039BE5 } [data-theme="mar"] { background-color: #80CBC4 } [data-theme="mar"] .row.head { color: #00897B } [data-theme="mar"] .header .text, [data-theme="mar"] .table .row .cell.active span { background-color: #00897B } [data-theme="apr"] { background-color: #C5E1A5 } [data-theme="apr"] .row.head { color: #7CB342 } [data-theme="apr"] .header .text, [data-theme="apr"] .table .row .cell.active span { background-color: #7CB342 } [data-theme="may"] { background-color: #FFE082 } [data-theme="may"] .row.head { color: #FFB300 } [data-theme="may"] .header .text, [data-theme="may"] .table .row .cell.active span { background-color: #FFB300 } [data-theme="jun"] { background-color: #FFAB91 } [data-theme="jun"] .row.head { color: #F4511E } [data-theme="jun"] .header .text, [data-theme="jun"] .table .row .cell.active span { background-color: #F4511E } [data-theme="jul"] { background-color: #CE93D8 } [data-theme="jul"] .row.head { color: #8E24AA } [data-theme="jul"] .header .text, [data-theme="jul"] .table .row .cell.active span { background-color: #8E24AA } [data-theme="aug"] { background-color: #B39DDB } [data-theme="aug"] .row.head { color: #5E35B1 } [data-theme="aug"] .header .text, [data-theme="aug"] .table .row .cell.active span { background-color: #5E35B1 } [data-theme="sep"] { background-color: #EF9A9A } [data-theme="sep"] .row.head { color: #E53935 } [data-theme="sep"] .header .text, [data-theme="sep"] .table .row .cell.active span { background-color: #E53935 } [data-theme="oct"] { background-color: #CE93D8 } [data-theme="oct"] .row.head { color: #8E24AA } [data-theme="oct"] .........完整代码请登录后点击上方下载按钮下载查看
网友评论0