jquery实现自适应时钟倒计时发送弹幕动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现自适应时钟倒计时发送弹幕动画效果代码，设定时间，显示倒计时，精确到秒，时钟显示当前时间年月日星期及时分秒指针走动及数字走动动画，可发送弹幕。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <style>
        *{margin: 0 auto;padding: 0;}
        html,body{background: #eeeeed;font-size: 14px;color: white!important;}
        html,body{
        	background-color:#a018d3;
        	background-repeat: repeat-y;
        	background-image: -moz-linear-gradient(left,#a018d3,#fe30ae);
        	background-image: -webkit-linear-gradient(left,#a018d3,#fe30ae);
        	background-image: -o-linear-gradient(left,#a018d3,#fe30ae);
        	background-image: linear-gradient(left,#a018d3,#fe30ae);
        	position: relative;
        	overflow-x: hidden;
        }
    
       
        .today {
        	width: 100%;
        	height: auto;
            margin: 0 auto;
            text-align: center;
        	padding: 20px;
        	box-sizing: border-box;
        }
        .today p{
        	margin: 20px auto;
        }
        .clock {
        	position: relative;
        	width: 300px;
        	height: 300px;
        	margin: 20px auto 0px;
        	text-align: center;
        	background: white;
        	border-radius: 50%;
        	border: 12px solid #590d75;
        	box-shadow: inset 0px 0px 20px 2px rgba(89,13,117,.6);
        }
        .clock ol {
        	list-style-type: none;
        	width: 100%;
        	height: 100%;
        	position: relative;
        	margin: 0;
        	padding: 0;
        	transform: scale(0.96);
        }
        .clock ol li::before {
        	font-family: Helvetica;
        	content: counter(labelCounter) "";
        }
        .clock ol li {
        	counter-increment: labelCounter;
        	position: absolute;
            font-size: 1.5em;
            color: #7d13a5;
        }
        .clock ol li:nth-child(1){right:73px;top:21px}
        .clock ol li:nth-child(2){right:29px;top:64px}
        .clock ol li:nth-child(3){right:12px;top:123px}
        .clock ol li:nth-child(4){right:31px;bottom:64px}
        .clock ol li:nth-child(5){right:73px;bottom:21px}
        .clock ol li:nth-child(6){left:132px;bottom:5px}
        .clock ol li:nth-child(7){left:73px;bottom:21px}
        .clock ol li:nth-child(8){left:31px;bottom:65px}
        .clock ol li:nth-child(9){left:12px;top:123px;}
        .clock ol li:nth-child(10){left:27px;top:64px}
        .clock ol li:nth-child(11){left:69px;top:22px}
        .clock ol li:nth-child(12){left:126px; top:5px;}
        .spot {
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	margin: auto;
        	width: 30px;
        	height: 30px;
        	/* background: #DD2476; */
            border-radius: 50%;
            z-index: 5;
        }
        .HH {
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	margin: auto;
        	width: 13px;
        	height: 13px;
        	border-radius: 7px;
        	transform: rotate(0deg);
        	z-index: 97;
        	background: #4e0b66;
        	opacity: 0.8;
        }
        .HH::before {
        	width: 10px;
        	height: 65px;
        	border-radius: 5px;
        	background: #4e0b66;
        	position: absolute;
        	bottom: -10px;
        	left: 50%;
        	transform: translate(-50%,0);
        }
        .MM {
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	margin: auto;
        	width: 13px;
        	height: 13px;
        	border-radius: 7px;
        	transform: rotate(0deg);
        	z-index: 98;
        	background: #7d13a5;
        	opacity: 0.8;
        }
        .MM:before {
        	width: 6px;
        	height: 95px;
        	border-radius: 4px;
        	background: #7d13a5;
        	position: absolute;
        	bottom: -10px;
        	left: 50%;
        	transform: translate(-50%,0);
        }
        .SS {
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	margin: auto;
        	width: 13px;
        	height: 13px;
        	border-radius: 7px;
        	transform: rotate(0deg);
        	z-index: 99;
        	background: #fe30ae;
        	opacity: 0.8;
        }
        .SS:before {
        	width: 2px;
        	height: 135px;
        	border-radius: 4px;
        	background: #fe30ae;
        	position: absolute;
        	bottom: -20px;
        	left: 50%;
        	transform: translate(-50%,0);
        	box-shadow: 2px 0px 5px rgba(174, 28, 92,.5);
        }
        .HH::after, .HH::before,
        .MM::after, .MM::before,
        .SS::after, .SS::before {
        	content: "";
        	display: block;
        	position: absolute;
        }
        .day {
        	margin: 10px auto 20px;
        	text-align: left;
        	font-size: 24px;
        
        	font-weight: lighter;
        	width: 145px;
        }
        .time span,
        .day span {
        	/* font-weight: bold; */
            margi.........完整代码请登录后点击上方下载按钮下载查看