jquery+css实现汉字款转盘时钟效果代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现汉字款转盘时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0;padding: 0; } html,body{ font-family: "Microsoft YaHei UI"; } a{ text-decoration: none; } span,em,b,i{ font-style: normal; } li{ list-style: none; } html,body{ font-size: 62.5%; background: #000; } .clock{ width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px; } .second{ width: 502px;height: 502px;position: absolute;left: 20px;top: 20px; border-radius: 100%; } .second ul{ width: 500px;height: 500px;position: relative;z-index: 8; border-radius: 100%;overflow: hidden; background: #293C55; /*transform: rotate(6deg);*/ } .second ul li,.minute ul li,.hour ul li{ height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table; /*background: #273341;*/padding: 0 2px; transform-origin: 10px 0; } .second ul li span,.minute ul li span,.hour ul li span{ display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff; } .minute{ width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%; transform: rotate(6deg); background: #273341; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0