TweenMax实现时间计时倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现时间计时倒计时动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Arimo:700' rel='stylesheet' type='text/css'> <style> * { margin: 0; padding: 0; font-family: "Arimo", sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background: #d7d7d7; color: white; } /*================= * TIMER *=================*/ .timer { width: 550px; height: 248px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -275px; margin-top: -124px; color: white; } .timer * { cursor: default; } .timer h3 { width: 100%; font-size: 26px; letter-spacing: 4px; text-align: center; } .timer--clock { width: 100%; position: relative; padding-left: 6px; margin-top: 22px; overflow: hidden; } .timer--clock .clock-display-grp { width: 100%; position: relative; } .timer--clock .clock-display-grp .number-grp { width: auto; display: block; height: 156px; float: left; overflow: hidden; } .timer--clock .clock-display-grp .number-grp .number-grp-wrp { width: 100%; position: relative; } .timer--clock .clock-display-grp .number-grp .number-grp-wrp .num { width: 100%; position: relative; height: 156px; } .timer--clock .clock-display-grp .number-grp .number-grp-wrp .num p { width: auto; display: table; font-size: 205px; line-height: 150px; font-weight: bold; } .timer--clock .clock-separator { width: auto; float: left; display: block; height: 156px; } .timer--clock .clock-separator p { width: auto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0