评论列表 评论
iambor iambor 二级站长 普通 11#
test
共0条回复,点击查看回复
iambor iambor 二级站长 普通 10#
test
共0条回复,点击查看回复
dfasfd
共0条回复,点击查看回复
http://player.56.com/v_OTIxMjQ4OTE.swf

共0条回复,点击查看回复
hqz8812 无名哥哥 三级站长 普通 7#
真的不错啊????
共0条回复,点击查看回复
hqz8812 无名哥哥 三级站长 普通 6#
bucuoa不错啊????
共0条回复,点击查看回复
98236m_p Young Voice 五级站长 普通 5#
一款纯CSS3制作的秒表丨芯晴网页特效丨CsrCode.CN body{ background:white; } .container { padding: 50px; text-align: center; } .timer { padding: 10px; background: -webkit-linear-gradient(top, #222, #444); background: -moz-linear-gradient(top, #222, #444); background: -ms-linear-gradient(top, #222, #444); background: -o-linear-gradient(top, #222, #444); background: linear-gradient(top, #222, #444); overflow: hidden; display: inline-block; border: 7px solid #efefef; border-radius: 5px; position: relative; box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1); } .cell { /*只显示一位数字. 高度 = 数字的行高,宽度 = 数字的宽度*/ width: 0.60em; height: 40px; font-size: 50px; overflow: hidden; position: relative; float: left; } .numbers { width: 0.6em; line-height: 40px; font-family: digital, arial, verdana; text-align: center; color: #fff; position: absolute; top: 0; left: 0; /*数字发光效果*/ text-shadow: 0 0 5px rgba(255, 255, 255, 1); } /*秒表控制器样式*/ #timer_controls { margin-top: -5px; } #timer_controls label { cursor: pointer; padding: 5px 10px; background: #efefef; font-family: arial, verdana, tahoma; font-size: 11px; border-radius: 0 0 3px 3px; } input[name="controls"] {display: none;} /*Control code*/ /*秒表暂停运转*/ #stop:checked~.timer .numbers { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } /*秒表开始运转*/ #start:checked~.timer .numbers { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } /*重置秒表*/ #reset:checked~.timer .numbers { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } .moveten { /*使用分步骤来移动数字,10个数字即是10步*/ -webkit-animation: moveten 1s steps(10, end) infinite; -moz-animation: moveten 1s steps(10, end) infinite; -o-animation: moveten 1s steps(10, end) infinite; -ms-animation: moveten 1s steps(10, end) infinite; animation: moveten 1s steps(10, end) infinite; /*默认情况下动画停止不动的*/ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } .movesix { -webkit-animation: movesix 1s steps(6, end) infinite; -moz-animation: movesix 1s steps(6, end) infinite; -o-animation: movesix 1s steps(6, end) infinite; -ms-animation: movesix 1s steps(6, end) infinite; animation: movesix 1s steps(6, end) infinite; } /*同步时间的速率*/ /*每秒十个数字,因此也需要十步*/ .second { -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -ms-animation-duration: 10s; animation-duration: 10s; } .tensecond { /*60 times .second*/ -webkit-animation-duration: 60s; -moz-animation-duration: 60s; -o-animation-duration: 60s; -ms-animation-duration: 60s; animation-duration: 60s; } .milisecond { /*1/10th of .second*/ -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; } .tenmilisecond { -webkit-animation-duration: 0.1s; -moz-animation-duration: 0.1s; -ms-animation-duration: 0.1s; -o-animation-duration: 0.1s; animation-duration: 0.1s; } .hundredmilisecond { -webkit-animation-duration: 0.01s; -moz-animation-duration: 0.01s; -o-animation-duration: 0.01s; -ms-animation-duration: 0.01s; animation-duration: 0.01s; } .minute { /*60 times .second*/ -webkit-animation-duration: 600s; -moz-animation-duration: 600s; -o-animation-duration: 600s; -ms-animation-duration: 600s; animation-duration: 600s; } .tenminute { /*60 times .minute*/ -webkit-animation-duration: 3600s; -moz-animation-duration: 3600s; -ms-animation-duration: 3600s; -o-animation-duration: 3600s; animation-duration: 3600s; } .hour { /*60 times .minute*/ -webkit-animation-duration: 36000s; -moz-animation-duration: 36000s; -ms-animation-duration: 36000s; -o-animation-duration: 36000s; animation-duration: 36000s; } .tenhour { /*10 times .hour*/ -webkit-animation-duration: 360000s; -moz-animation-duration: 360000s; -o-animation-duration: 360000s; -ms-animation-duration: 360000s; animation-duration: 360000s; } @-webkit-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ } @-webkit-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @-moz-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ } @-moz-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @-o-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ } @-o-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @-ms-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ } @-ms-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ } @keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } /*Lets use a better font for the numbers*/ @font-face { font-family: 'digital'; src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF'); } <p class="page"> <p class="container"> <p class="timer"> <p class="cell"> <p class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell"> <p class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell divider"><p class="numbers">:</p></p> <p class="cell"> <p class="numbers tenminute movesix">0 1 2 3 4 5 6</p> </p> <p class="cell"> <p class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell divider"><p class="numbers">:</p></p> <p class="cell"> <p class="numbers tensecond movesix">0 1 2 3 4 5 6</p> </p> <p class="cell"> <p class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell divider"><p class="numbers">:</p></p> <p class="cell"> <p class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell"> <p class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</p> </p> <p class="cell"> <p class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</p> </p> </p> <p id="timer_controls"> <label for="start">Start</label> <label for="stop">Stop</label> <label for="reset">Reset</label> </p> </p> <p style="text-align:center">此案例代码来自于<a href="http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript" target="_blank">thecodeplayer.com</a>,并做过相应的代码处理。</p> </p>
共0条回复,点击查看回复
98236m_p Young Voice 五级站长 普通 4#
.time-item strong{background:#C71C60;color:#fff;line-height:49px;font-size:36px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);} #day_show{float:left;line-height:49px;color:#c71c60;font-size:32px;margin:0 10px;font-family:Arial, Helvetica, sans-serif;} .item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;} h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;} var intDiff = parseInt(200000);//初始日期 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute
共0条回复,点击查看回复
a253950882 神秘人 六级站长 普通 3#
用户等级是怎么设置的?
共0条回复,点击查看回复
cnhbzx 互帮自学 五级站长 普通 2#
勤劳的乐天啊
共0条回复,点击查看回复
发布评论

评论: HadSky v3.5.4.20161119 新增支持版块版主设置

已有0次打赏
(12) 分享
分享

请保存二维码或复制链接进行分享

取消