<!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>
js+css时钟效果 js+css时钟效果
版权申诉
172 浏览量
2022-04-18
13:31:44
上传
评论
收藏 7KB RAR 举报
js+css时钟效果.rar （6个子文件） 
js+css时钟效果 css 
splitting.css 2KB style.css 3KB
index.html 1KB js splitting.js 11KB script.js 728B index - 副本.html 5KB资源评论
大富大贵7
- 粉丝: 302
- 资源: 8869
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
