TweenMax实现翻页倒计时效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现翻页倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { background-color: #f2f1ed; } .wrap { position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin: auto; height: 310px; } a { text-decoration: none; color: #1a1a1a; } h1 { margin-bottom: 60px; text-align: center; font: 300 2.25em "Lato"; text-transform: uppercase; } h1 strong { font-weight: 400; color: #ea4c4c; } h2 { margin-bottom: 80px; text-align: center; font: 300 0.7em "Lato"; text-transform: uppercase; } h2 strong { font-weight: 400; } .countdown { width: 720px; margin: 0 auto; } .countdown .bloc-time { float: left; margin-right: 45px; text-align: center; } .countdown .bloc-time:last-child { margin-right: 0; } .countdown .count-title { display: block; margin-bottom: 15px; font: normal 0.94em "Lato"; color: #1a1a1a; text-transform: uppercase; } .countdown .figure { position: relative; float: left; height: 110px; width: 100px; margin-right: 10px; background-color: #fff; border-radius: 8px; -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); } .countdown .figure:last-child { margin-right: 0; } .countdown .figure > span { position: absolute; left: 0; right: 0; margin: auto; font: normal 5.94em/107px "Lato"; font-weight: 700; color: #de4848; } .countdown .figure .top:after, .countdown .figure .bottom-back:after { content: ""; position: absolute; z-index: -1; l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0