Html
    Css
    Js

    
                        
/*
Base Reset CSS
 */
* {
	margin:0;
	padding:0;
}
html,body {
	height:100%;
}
body {
	font-family:"Microsoft Yahei";
	background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1486823066&di=c88093f821a497bdbb6b0cd5d5cefcfe&src=http://pic1.win4000.com/wallpaper/e/57ac30eb52fcb.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
}
a {
	text-decoration:none;
}
ul,li {
	padding:0;
	margin:0;
	list-style:none;
}
/*
Common
 */
.container h1 {
	color:#333;
	font-weight:100;
	background:rgba(255,255,255,.5);
	text-align:center;
}
.container ul li {
	font-size:60px;
	font-weight:100;
	color:#fff;
	border-radius:10px;
	text-align:center;
}
.container ul li:nth-child(1) {
	background:rgba(255,102,102,.7);
}
.container ul li:nth-child(2) {
	background:rgba(0,204,153,.75);
}
.container ul li:nth-child(3) {
	background:rgba(204,153,204,.55);
}
.container ul li:nth-child(4) {
	background:rgba(255,255,255,.2);
}
sub {
	font-weight:400;
	font-size:15px;
}
/*
桌面显示器,width>=992px
 */
@media (min-width:992px) {
	.container {
	position:absolute;
	top:50%;
	left:50%;
	margin:-240px 0 0 -480px;
	width:960px;
	height:480px;
	text-align:center;
	background:rgba(0,0,0,.3);
	border-radius:10px;
	transition:all 0.5s;
}
.container h1 {
	margin:50px 0;
	padding:20px;
	font-size:40px;
}
.container ul {
	overflow:auto;
}
.container ul li {
	display:inline-block;
	width:180px;
	height:180px;
	line-height:180px;
	font-size:60px;
	font-weight:100;
	color:#fff;
	border-radius:10px;
}
.container ul li:nth-child(2) {
	margin:0 15px;
}
.container ul li:nth-child(3) {
	margin:0 15px 0 0;
}
}/*
平板,768px=

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js响应式生日倒计时

修改背景图片和添加音乐可以为倒计时润色哦

1
      zhshanghai0
      2017/2/14 20:09:56

      非常感谢分享  很好的资源

      回复