jquery倒计时框及背景颜色动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery倒计时框及背景颜色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap:break-word; background: #fff; padding-top: 100px } .countdown-label { font: thin 15px Arial, sans-serif; color: #65584c; text-align: center; text-transform: uppercase; display: inline-block; letter-spacing: 2px; margin-top: 9px } #countdown{ box-shadow: 0 1px 2px 0 rgba(1, 1, 1, 0.4); width: 240px; height: 96px; text-align: center; background: #f1f1f1; border-radius: 5px; margin: auto; } #countdown #tiles{ color: #fff; position: relative; z-index: 1; text-shadow: 1px 1px 0px #ccc; display: inline-block; font-family: Arial, sans-serif; text-align: center; padding: 20px; border-radius: 5px 5px 0 0; font-size: 48px; font-weight: thin; display: block; } .color-full { background: #53bb74; } .color-half { background: #ebc85d; } .color-empty { background: #e5554e; } #countdown #tiles > span{ width: 70px; max-width: 70px; padding: 18px 0; position: relative; } #countdown .labels{ width: 100%; height: 25px; text-align: center; position: absolute; bottom: 8px; } #countdown .labels li{ width: 102px; font: bold 15px 'Droid Sans', Arial, sans-serif; color: #f47321; text-shadow: 1px 1px 0px #000; text-align: center; text-transform: uppercase; display: inline-block; } </style> </head> <body> <input type="hidden" id="set-time" value="1"/> <div id="countdown"> <div id='tiles' class="color-full"></div> <div class="countdown-label">Time Remaining</div> </div> <script type="t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0