svg+js实现一个简约时钟手表效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+js实现一个简约时钟手表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); html { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } svg { display: none; } body { background-color: #7b0828; margin: 0; } .hour_marker { fill: transparent; stroke: #f0f0c9; stroke-width: 7; stroke-dasharray: 0.2, 4.8; stroke-dashoffset: 0.1; } .minute_marker { fill: transparent; stroke: #0f0e0e; stroke-width: 7; stroke-dasharray: 0.2, 0.8; stroke-dashoffset: 0.1; } .hand { stroke: #ffffff; stroke-width: 2; stroke-linecap: round; } .hand--thick { stroke-width: 7; } .hand--second { stroke: yellow; } .center { fill: #7b0828; stroke-width: 2; stroke: white; } .text { fill: #f0f0c9; font-family: "Roboto", sans-serif; text-anchor: middle; cursor: pointer; user-select: none; } </style> </head> <body> <svg width="200" height="200" viewBox="-100 -100 200 200"> <circle class="minute_marker" r="90" pathLength="60" /> <circle class="hour_marker" r="90" pathLength="60" /> <text id="text" class="text" x="45" y="5"></text> <g id="hour_hand"> <line class="hand" x1="0" y1="0" x2="0" y2="-50" /> <line class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0