纯css实现一个手表效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个手表效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #eee; font-family: "Helvetica Neue", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Website Header */ .header { text-align: center; font-weight: 300; font-size: 30px; color: #999; margin: 50px; } /* Watch Container */ .watch-container { width: 300px; margin: 50px auto; } /* Watch */ .watch { position: relative; width: 300px; height: 300px; } /* Watch Face */ .watch-face { width: 300px; height: 300px; border-radius: 100%; background: #3F484A; /* Dial colour */ border: 10px solid silver; /* Face border */ box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3); } /* Watch Face Outline */ .watch-face-outline {} .watch-face-outline-point { position: absolute; width: 10px; height: 10px; background: #777; left: 145px; top: 24px; border-radius: 100%; -webkit-transform-origin: 50% 126px; transform-origin: 50% 126px; } .point-12 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .point-1 { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .point-2 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .point-3 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .point-4 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .point-5 { -webkit-transform: rotate(150deg); transform: rotate(150deg); } .point-6 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .point-7 { -webkit-transform: rotate(210deg); transform: rotate(210deg); } .point-8 { -webkit-transform: rotate(240deg); transform: rotate(240deg); } .point-9 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .point-10 { -webkit-transform: rotate(300deg); transform: rotate(300deg); } .point-11 { -webkit-transform: rotate(330deg); transform: rotate(330deg); } /* Watch Face Date */ .watch-face-date { position: absolute; background-color: rgba(0,0,0,0.1); width: 27px; height: 27px; border-radius: 100%; text-align: center; top: 138px; right: 50px; font-size: 15px; line-height: 27px; color: #aaa; font-weight: 300; } /* Watch Face Center */ .watch-face-centre { position: absolute; width: 12px; height: 12px; top: 144px; left: 144px; border-radius: 100%; background: #fff; } .watch-face-centre-inner { position: absolute; z-index: 1; width: 8px; height: 8px; top: 2px; left: 2px; border-radius: 100%; background: #333; border: 2px solid #fa9f22; } /* Watch Face Hands */ .watch-face-hands {} .watch-face-hand { position: absolute; } .watch-face-hand.hour { width: 4px; height: 60px; top: 90px; left: 148px; border-radius: 10px; background: #fff; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate(306deg); transform: rotate(306deg); } .watch-face-hand.minute { width: 4px; height: 120px; top: 30px; left: 148px; border-radius: 10px; background: #fff; -webkit-transform-origin: 50% .........完整代码请登录后点击上方下载按钮下载查看
网友评论0