js+css时钟效果js+css时钟效果_手机翻页时钟小程序资源-CSDN下载

共6个文件

js：2个

html：2个

css：2个

版权申诉

176 浏览量 2022-04-18 13:31:44 上传评论收藏 7KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

js+css时钟效果.rar （6个子文件）

js+css时钟效果

css

splitting.css 2KB

style.css 3KB

index.html 1KB

splitting.js 11KB

script.js 728B

index - 副本.html 5KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>JS+CSS 时钟效果</title> <link rel="stylesheet" href="css/style.css"> <style> .miaoshu{ text-align: center; font-size: 50px; color: #333; font-weight: bold; } h1{text-align: center; font-size: 66px;} h1 span { position: relative; top: 20px; display: inline-block; -webkit-animation: bounce .3s ease infinite alternate; animation: bounce .3s ease infinite alternate; font-family: 'Titan One', cursive; font-size: 80px; color: #F00; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4); } h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; } h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; } h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; } h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; } h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; } h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; } h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; } h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; } h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; } h1 span:nth-child(11) { -webkit-animation-delay: .10s; animation-delay: .10s; } h1 span:nth-child(12) { -webkit-animation-delay: .11s; animation-delay: .11s; } h1 span:nth-child(13) { -webkit-animation-delay: .12s; animation-delay: .12s; } h1 span:nth-child(14) { -webkit-animation-delay: .13s; animation-delay: .13s; } h1 span:nth-child(15) { -webkit-animation-delay: .14s; animation-delay: .14s; } h1 span:nth-child(16) { -webkit-animation-delay: .15s; animation-delay: .15s; } h1 span:nth-child(17) { -webkit-animation-delay: .16s; animation-delay: .16s; } @-webkit-keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } @keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } </style> </head> <body> <br> <h1> <span>进</span> <span>群</span> <span>程</span> <span>序</span> <span>员</span> <span>们</span> <span>，</span> <span>群</span> <span>里</span> <span>有</span> <span>源</span> <span>码</span> <br><span>QQ群1055936523</span> </h1> <div class="container"> <div class="clock"> <div class="clock__item clock__year"> <div class="clock__year--item clock__year--01"></div> <div class="clock__year--item clock__year--02"></div> <div class="clock__year--item clock__year--03"></div> <div class="clock__year--item clock__year--04"></div> <div class="clock__year--item clock__year--05"></div> <div class="clock__year--item clock__year--06"></div> <div class="clock__year--item clock__year--07"></div> <div class="clock__year--item clock__year--08"></div> </div> <div class="clock__item clock__month"> <div class="clock__month--item clock__month--01"></div> <div class="clock__month--item clock__month--02"></div> <div class="clock__month--item clock__month--03"></div> <div class="clock__month--item clock__month--04"></div> <div class="clock__month--item clock__month--05"></div> <div class="clock__month--item clock__month--06"></div> </div> <div class="clock__item clock__day-numbers"> <div class="clock__day-numbers--item clock__day-numbers--01"></div> <div class="clock__day-numbers--item clock__day-numbers--02"></div> <div class="clock__day-numbers--item clock__day-numbers--03"></div> <div class="clock__day-numbers--item clock__day-numbers--04"></div> </div> <div class="clock__item clock__day-letters"> <div class="clock__day-letters--item clock__day-letters--01"></div> <div class="clock__day-letters--item clock__day-letters--02"></div> <div class="clock__day-letters--item clock__day-letters--03"></div> <div class="clock__day-letters--item clock__day-letters--04"></div> <div class="clock__day-letters--item clock__day-letters--05"></div> <div class="clock__day-letters--item clock__day-letters--06"></div> </div> <div class="clock__item clock__analog"> <div class="clock__analog--hours"></div> <div class="clock__analog--minutes"></div> <div class="clock__analog--seconds"></div> </div> </div> </div> <div class="miaoshu"> 程序员们，中午好<br>进群吧，程序员们，群里有源码 </div> <script src="js/script.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉