jquery+css实现黑色时间代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现黑色时间代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .partial { display: inline-block; margin-right: 1rem; padding: 1rem; font-size: 5rem; color: #fff; text-shadow: 0 0 7px #111; background-color: #333; border: 3px solid #222; box-shadow: 0 0 0.5rem #000; border-radius: 10%; } .animated { animation: animate 500ms; } @keyframes animate { 0% { background-color: #666; border: 3px solid #333; box-shadow: 0 0 0.5rem #111; } 100% { background-color: #333; border: 3px solid #222; box-shadow: 0 0 0.5rem #000; } } /* styling */ html { width: 100%; height: 100%; background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat; overflow-x: hidden; overflow-y: hidden; } body { text-align: center; display: table; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; } #wrap { box-sizing: border-box; display: table-cell; vertical-align: middle; } </style> </head> <body > <div id="wrap"> <div class="time"> <div class="partial hours"></div> <div class="partial minutes"></div> <div class="partial seconds"></div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > function getTime() { var time = new Date(); var result = {}; result.hours = doubleDigits(time.getHours()); result.minutes.........完整代码请登录后点击上方下载按钮下载查看
网友评论0