jquery实现自适应时钟倒计时发送弹幕动画效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现自适应时钟倒计时发送弹幕动画效果代码,设定时间,显示倒计时,精确到秒,时钟显示当前时间年月日星期及时分秒指针走动及数字走动动画,可发送弹幕。
代码标签: 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; */ margin: 0px 2px; font-weight: lighter; font-size: 24px; vertical-align: middle; } .time p{ vertical-align: middle; } .time p:nth-child(1){ font-size: 20px; } .time p span{ font-weight: lighter; font-size: 36px; } .sydate, .time{ color: yellow; vertical-align: middle; } .sydate{ margin: 10px auto; } .sydate span{ font-weight: lighter; margin: 0px 2px; } .date { position: absolute; top: 65px; left: 0; right: 0; color: #590d75; text-align: center; font-size: 15px; } .times { position: absolute; bottom: 65px; left: 0; right: 0; color: #590d75; text-align: left; font-size: 16px; width: 100px; } .times span, .date span{ margin: 0px 2px; color: #b21beb; font-weight: lighter; } .week { position: absolute; top: 125px; right: 40px; color: #7d13a5; text-align: center; /* border: 1px solid #7d13a5; */ width: 52px; height: 22px; line-height: 21px; font-size: 12px; z-index: 0; box-shadow: inset 0px 0px 10px 1px rgba(89,13,117,.3); } .year { position: absolute; top: 80px; left: 0; right: 0; color: #590d75; text-align: center; font-size: 80px; font-family: impact; opacity: 0.08; z-index: 1; } @-webkit-keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { transform-origin: left bottom; -webkit-transform: rotate(45deg) translateY(20px); transform: rotate(45deg) translateY(20px); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { transform-origin: left bottom; -webkit-transform: rotate(45deg) translateY(20px); transform: rotate(45deg) translateY(20px); opacity: 0 } } .Lose{ display: -webkit-inline-box; animation: rotateOutDownLeft 1000ms infinite; -webkit-animation: rotateOutDownLeft 1000ms infinite; /* Safari 与 Chrome */ } .Barrage { position: absolute; width: 100%; height: 380px; margin: 0 auto; top: 0; left: 0; right: 0; z-index: 99; } .message { width: 60%; height: 50px; border-radius: 25px; text-align: center; line-height: 48px; font-size: 15px; cursor: pointer; background: rgba(89,13,117,.25); /* background-color: #a018d3; background-repeat: repeat-y; background-image: -moz-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); background-image: -webkit-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); background-image: -o-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); background-image: linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); */ } .key { position: fixed; width: 100%; height: 200px; padding: 40px 20px 20px 20px; box-sizing: border-box; background: white; z-index: 20; bottom: -400px; border-radius: 20px 20px 0px 0px; transition: all 300ms; } .keys{ bottom: 0px; animation: keys 300ms ease; -webkit-animation: keys 300ms ease; /* Safari 与 Chrome */ } @-webkit-keyframes keys { 0% { transform: translateY(400px); } 100% { transform: translateY(0px); } } @keyframes keys { 0% { transform: translateY(400px); } 100% { transform: translateY(0px); } } .van-field__control { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; color: #323233; text-align: left; background-color: transparent; border: 0; resize: none; min-height: 100px; font-size: 16px; } .buts { width: 80%; height: 42px; 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); border-radius: 21px; line-height: 42px; text-align: center; font-size: 16px; cursor: pointer; } .iocnBox { position: absolute; width: 100%; height: 40px; top: 0; left: 0; right: 0; margin: auto; color: #333; text-align: right; padding-right: 20px; line-height: 40px; cursor: pointer; } .iocnBox i { font-size: 18px; color: #909399; } .remove{ animation-fill-mode: forwards; animation: remove 300ms ease; -webkit-animation: remove 300ms ease; /* Safari 与 Chrome */ } @-webkit-keyframes remove { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } } @keyframes remove { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } } .Barrage span { position: absolute; background: rgba(89,13,117,.25); color: white; display: initial; padding: 0px 15px; box-sizing: border-box; border-radius: 20px; line-height: 35px; animation: Barrag 10s linear infinite; -webkit-animation: Barrag 10s linear infinite; top: 60px; white-space: nowrap; font-size: 12px; } @keyframes Barrag { 0% {right: -200px;opacity: 1;} 80% {right: 1120px;opacity: 1;} 100% {right: 1400px;opacity: 0;} } @-webkit-keyframes Barrag /* Safari 与 Chrome */ { 0% {right: -200px;opacity: 1;} 80% {right: 1120px;opacity: 1;} 100% {right: 1400px;opacity: 0;} } .Barrage span:nth-child(2):before, .Barrage span:nth-child(1):before{ content:""; width: 24px; height: 24px; margin-right: 5px; background:url(//repo.bfw.wiki/bfwrepo/icon/5de0947920357.png) no-repeat; background-size: 24px 24px; background-position: center bottom; display: inline-block; vertical-align: middle; } .Barrage span:nth-child(2):after, .Barrage span:nth-child(1):after{ content:""; width: 26px; height: 26px; margin-left: 5px; background:url(//repo.bfw.wiki/bfwrepo/icon/5de0947920357.png) no-repeat; background-size: 26px auto; background-position: center bottom; display: inline-block; vertical-align: middle; } .B-span2{ top: 100px!important; color: #ff0!important; animation: Barrag 6s linear infinite!important; -webkit-animation: Barrag 6s linear infinite!important; } .Barrage span:nth-child(3){ top: 140px!important; color: #0dd2ef!important; animation: Barrag 12.8s linear infinite!important; -webkit-animation: Barrag 12.8s linear infinite!important; } .Barrage span:nth-child(4){ top: 160px!important; color: #ff0!important; animation: Barrag 10s linear infinite!important; -webkit-animation: Barrag 10s linear infinite!important; } .Barrage span:nth-child(5){ top: 190px!important; color: #3fd316!important; animation: Barrag 17.5s linear infinite!important; -webkit-animation: Barrag 17.5s linear infinite!important; } .Barrage span:nth-child(6){ top: 100px!important; color: #ff0!important; animation: Barrag 20s linear infinite!important; -webkit-animation: Barrag 20s linear infinite!important; } .Barrage span:nth-child(7){ top: 120px!important; color: #0dd2ef!important; animation: Barrag 15s linear infinite!important; -webkit-animation: Barrag 15s linear infinite!important; } .Barrage span:nth-child(8){ top: 200px!important; color: #ff0!important; animation: Barrag 16s linear infinite!important; -webkit-animation: Barrag 16s linear infinite!important; } .Barrage span:nth-child(9){ top: 80px!important; color: #3fd316!important; animation: Barrag 8s linear infinite!important; -webkit-animation: Barrag 8s linear infinite!important; } @keyframes Barragss { 0% {right: 0px;opacity: 1;} 80% {right: 1120px;opacity: 1;} 100% {right: 1400px;opacity: 0;} } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0