TweenMax日历翻转动画显示日期效果
代码语言:html
所属分类:悬停
代码描述:TweenMax日历翻转动画显示日期效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500); @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700); html, body { display: table; width: 100%; height: 100%; background: #f8f8f8; } .main-ctr { display: table-cell; vertical-align: middle; text-align: center; } .calendar-ctr { width: 200px; height: 200px; margin: 0 auto; display: block; position: relative; -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px; font-family: Roboto; font-weight: 400; } .calendar-ctr .top { position: absolute; top: 0; right: 0; left: 0; height: 50%; background: #3C75D3; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; will-change: transform; } .calendar-ctr .top:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 1px solid rgba(0, 0, 0, 0.25); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .calendar-ctr .top.top-0 { background: #ddd; } .calendar-ctr .top.top-0 { z-index: 29; } .calendar-ctr .top.top-1 { z-index: 28; } .calendar-ctr .top.top-2 { z-index: 27; } .calendar-ctr .top.top-3 { z-index: 26; } .calendar-ctr .top.top-4 { z-index: 25; } .calendar-ctr .top.top-5 { z-index: 24; } .calendar-ctr .top.top-6 { z-index: 23; } .calendar-ctr .top.top-7 { z-index: 22; } .calendar-ctr .top.top-8 { z-index: 21; } .calendar-ctr .top.top-9 { z-index: 20; } .calendar-ctr .top.top-10 { z-index: 19; } .calendar-ctr .top.top-11 { z-index: 18; } .calendar-ctr .top.top-12 { z-index: 17; } .calendar-ctr .top.top-13 { z-index: 16; } .calendar-ctr .top.top-14 { z-index: 15; } .calendar-ctr .top.top-15 { z-index: 14; } .calendar-ctr .top.top-16 { z-index: 13; } .calendar-ctr .top.top-17 { z-index: 12; } .calendar-ctr .top.top-18 { z-index: 11; } .calendar-ctr .top.top-19 { z-index: 10; } .calendar-ctr .top.top-20 { z-index: 9; } .calendar-ctr .top.top-21 { z-index: 8; } .calendar-ctr .top.top-22 { z-index: 7; } .calendar-ctr .top.top-23 { z-index: 6; } .calendar-ctr .top.top-24 { z-index: 5; } .calendar-ctr .top.top-25 { z-index: 4; } .calendar-ctr .top.top-26 { z-index: 3; } .calendar-ctr .top.top-27 { z-index: 2; } .calendar-ctr .top.top-28 { z-index: 1; } .calendar-ctr .top.top-29 { z-index: 0; } .calendar-ctr .top .number { position: absolute; top: 0; right: 0; bottom: -100%; left: 0; text-align: center; line-height: 200px; font-size: 120px; color: white; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); } .calendar-ctr .top-29 { position: absolute; top: 0; right: 0; left: 0; height: 50%; background: #3C6BD2; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; will-change: transform; } .calendar-ctr .top-29:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 1px solid rgba(0, 0, 0, 0.25); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .calendar-ctr .top-29 .number { position: absolute; top: 0; right: 0; bottom: -100%; left: 0; text-align: center; line-height: 200px; font-size: 120px; color: white; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); } .calendar-ctr .bottom { position: absolute; right: 0; bottom: 0; left: 0; height: 50%; background: #4887F2; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); will-change: transform; } .calendar-ctr .bottom:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top: 1px solid rgba(0, 0, 0, 0.15); } .calendar-ctr .bottom.bottom-0 { z-index: 0; } .calendar-ctr .bottom.bottom-1 { z-index: 1; } .calendar-ctr .bottom.bottom-2 { z-index: 2; } .calendar-ctr .bottom.bottom-3 { z-index: 3; } .calendar-ctr .bottom.bottom-4 { z-index: 4; } .calendar-ctr .bottom.bottom-5 { z-index: 5; } .calendar-ctr .bottom.bottom-6 { z-index: 6; } .calendar-ctr .bottom.bottom-7 { z-index: 7; } .calendar-ctr .bottom.bottom-8 { z-index: 8; } .calendar-ctr .bottom.bottom-9 { z-index: 9; } .calendar-ctr .bottom.bottom-10 { z-index: 10; } .calendar-ctr .bottom.bottom-11 { z-index: 11; } .calendar-ctr .bottom.bottom-12 { z-index: 12; } .calendar-ctr .bottom.bottom-13 { z-index: 13; } .calendar-ctr .bottom.bottom-14 { z-index: 14; } .calendar-ctr .bottom.bottom-15 { z-index: 15; } .calendar-ctr .bottom.bottom-16 { z-index: 16; } .calendar-ctr .bottom.bottom-17 { z-index: 17; } .calendar-ctr .bottom.bottom-18 { z-index: 18; } .calendar-ctr .bottom.bottom-19 { z-index: 19; } .calendar-ctr .bottom.bottom-20 { z-index: 20; } .calendar-ctr .bottom.bottom-21 { z-index: 21; } .calendar-ctr .bottom.bottom-22 { z-index: 22; } .calendar-ctr .bottom.bottom-23 { z-index: 23; } .calendar-ctr .bottom.bottom-24 { z-index: 24; } .calendar-ctr .bottom.bottom-25 { z-index: 25; } .calendar-ctr .bottom.bottom-26 { z-index: 26; } .calendar-ctr .bottom.bottom-27 { z-index: 27; } .calendar-ctr .bottom.bottom-28 { z-index: 28; } .calendar-ctr .bottom.bottom-29 { z-index: 29; } .calendar-ctr .bottom.bottom-0 { background: #eee; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .calendar-ctr .bottom .number { position: absolute; top: -100%; right: 0; bottom: 0; left: 0; text-align: center; line-height: 200px; font-size: 120px; color: white; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); } .refresh { position: fixed; top: 15px; right: 15px; -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); width: 50px; height: 50px; background: white; border-radius: 50%; z-index: 99; cursor: pointer; box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); } </style> </head> <body translate="no"> <div class='refresh'> <svg height='50' viewBox='0 0 50 50' w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0