moment实现一个数字时钟及数字跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:moment实现一个数字时钟及数字跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { padding: 2em; background-color: #555; } .inputStyle { display: block; width: 60%; padding: 0.5em 1em; margin: 1em auto; border: none; font-family: "consolas", monospace; font-size: 1.2em; } .section-title { font-size: 2.5em; color: #eee; font-family: "Open Sans", Arial, sans-serif; font-weight: 300; text-align: center; margin: 1em 0; } .attrib { background-color: #888; padding: 10px; text-align: center; font-family: "Consolas"; } .attrib .credits a { color: #7dffee; } /* section - digits time */ .times-digit { text-align: center; } .hours, .minutes, .seconds { display: inline-block; } .times-digit .digit, .times-digit .colon { display: inline-block; } /* section - digits go random */ .digits-go-random .digit { float: left; transform: scale(0.5); transition: 0.2 all ease-in-out; } .digits-go-random .digit:hover { transform: scale(1); transition: 0.2 all ease-in-out; } /* Digits CSS */ .digit, .colon { position: relative; margin: 2em 1em; width: 120px; height: 240px; } .colon { width: 80px; } .colon .circle { position: absolute; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; box-shadow: 0 12px 0px -1px rgba(0,0,0,0.45); left: 50%; margin-left: -20px; } .colon .circle-1 { top: 50%; margin-top: -80px; } .colon .circle-2 { top: 50%; margin-top: 40px; } .digit .line { background-color: #fff; position: absolute; border-radius: 5px; box-shadow: 0 12px 0px -1px rgba(0,0,0,0.45); transition: 0.2s all ease-in-out; } .line-1, .line-2, .line-5 { width: 120px; height: 30px; } .line-3, .line-4, .line-6, .line-7 { width: 30px; height: 120px; } .line-1 { top: 0; left: 0; right: 0; } .line-2 { bottom: 0; left: 0; right: 0; } .line-3 { left: 0; } .line-4 { right: 0; } .line-5 { top: 105px; } .line-6 { top: 120px; left: 0; } .line-7 { top: 120px; right: 0; } /* Digit 1 */ .digit-1 .line-2, .digit-1 .line-3, .digit-1 .line-5, .digit-1 .line-1, .digit-1 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 2 */ .digit-2 .line-3, .digit-2 .line-7 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 2 */ .digit-3 .line-3, .digit-3 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 4 */ .digit-4 .line-1, .digit-4 .line-2, .digit-4 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 5 */ .digit-5 .line-4, .digit-5 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 6 */ .digit-6 .line-4 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 7 */ .digit-7 .line-2, .digit-7 .line-3, .digit-7 .line-5, .digit-7 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 9 */ .digit-9 .line-0, .digit-9 .line-2, .digit-9 .line-6 { opacity: 0.1; transform: rotateZ(360deg); } /* Digit 0 */ .digit-0 .line-5 { opacity: 0.1; transform: rotateZ(360deg); } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.2.29.1.js"></script> </head> <body> <article class="digits-time"> <h3 class="section-title">Digits Time (hh:mm:ss)</h3> <div class="times-digit"> <div class="hours"> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> </div> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> </div> </div> <div class="colon"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div> <div class="minutes"> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> </div> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> </div> </div> <div class="colon"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div> <div class="seconds"> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> </div> <div class="digit digit-0"> <div class="line line-1"></div> <div class="line line-2"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0